JavaScript如何遍历含嵌套数组的数组对象并渲染全部内容？

问题根源 #

你代码的问题出在两点：

1. 用外层遍历database数组的索引i来取内层info数组的元素，外层索引是整个行业列表的下标，和info数组的下标没有对应关系，自然只能拿到单个元素甚至会出现undefined
2. 没有对匹配到的行业的info数组做单独遍历，没法输出所有info项

修正后代码 #

const database = [
    {
        sectorName: "قطاع السياحة",
        sectorCode: "t102",
        sectorIcon: "fas fa-suitcase",
        sectorN: "tourism",
        info: ["ترخيص عقاري", "الارشاد السياحي", "تنظيم الرحلات السياحية", "حجز وحدات الايواء", "الايواء السياحي"],
        desc: "شرح تفصيلي",
    },
    {
        sectorName: "قطاع الصناعة",
        sectorCode: "K503",
        sectorIcon: "fas fa-map-marked-alt",
        sectorN: "industry",
        info: [],
        desc: "شرح تفصيلي",
    },
    {
        sectorName: "قطاع الزراعة",
        sectorCode: "B201",
        sectorIcon: "fas fa-suitcase",
        sectorN: "agriculture",
        info: [],
        desc: "شرح تفصيلي",
    },
    {
        sectorName: "قطاع التجارة",
        sectorCode: "m907",
        sectorIcon: "fas fa-map-marked-alt",
        sectorN: "trading",
        info: [],
        desc: "شرح تفصيلي",
    },
    {
        sectorName: "قطاع النقل",
        sectorCode: "P001",
        sectorIcon: "fas fa-suitcase",
        sectorN: "transport",
        info: [],
        desc: "شرح تفصيلي",
    },
];

function getInfo() {
    let href = document.location.href;
    let id = href.split('=')[1];
    // 直接定位匹配的行业对象，无需全量遍历
    const targetSector = database.find(item => item.sectorCode === id);
    if (!targetSector) return;

    selectElement('.title').innerHTML += targetSector.sectorName;
    // 遍历info数组每一项生成独立div
    targetSector.info.forEach(infoItem => {
        selectElement(".left").innerHTML += `
<div class="box">
<div class="inner-box">
<div class="title"><a href="steps.html?id=${targetSector.sectorCode}">${infoItem}</a></div>
<div class="desc">${targetSector.desc}</div>
</div>
<a href="steps.html?id=${targetSector.sectorCode}" class="btn">اختار</a>
</div>
`;
    })
}

调整说明 #

• 用find方法直接找匹配的行业，性能更高
• 新增对info数组的遍历，每个info项都会生成独立的div
• 修复了原代码中引用不存在的tId字段的问题，替换为实际存在的sectorCode

内容的提问来源于stack exchange，提问作者Mohamad