如何基于4D数组Navitems动态渲染导航栏：HTML循环实现方法咨询

嘿，我来帮你搞定这个动态导航栏的渲染问题！咱们先从拆解数据结构开始，再一步步写出可运行的代码，完全匹配你给的HTML示例结构。

一、先理清数据结构规律 #

你的Navitems数组是成对分组的：

• 偶数索引（0、2...）是设备类型对象（{type: 'xxx'}）
• 紧随其后的奇数索引（1、3...）是该类型下的所有公司数据数组
  每个公司数组同样是成对结构：
• 偶数索引是公司对象（{company: 'xxx'}）
• 奇数索引是该公司下的所有系列数据数组
  系列数组也是成对：
• 偶数索引是系列对象（{series: 'xxx'}）
• 奇数索引是该系列下的所有型号数组

二、实现步骤与代码 #

1. 准备HTML容器 #

首先在页面里添加一个容器，用来承载所有动态生成的导航：

<div id="nav-container"></div>

2. 编写JS渲染逻辑 #

我们用模板字符串来拼接HTML，比嵌套创建DOM元素更简洁易读。直接遍历数组，按照你的示例结构生成对应代码：

const Navitems = [
    {type: 'Mobile'},
    [
        {company: 'Acer'},
        [
            {series: 'ICONIA A-SERIES'},
            [{model: 'A1-810'},{model: 'A1-830'},{model: 'A1-840'}],
            {series: 'ICONIA B-SERIES'},
            [{model: 'B1-710'},{model: 'B1-720'},{model: 'B1-730'}],
            {series: 'LIQUID'},
            [{model: 'A1-S100'},{model: 'Z200'},{model: 'Z500'},{model: 'Z525'}],
            {series: 'OTHERS'},
            [{model: 'W3-810'}]
        ],
        {company: 'Alcatel'},
        [
            {series: "ONE TOUCH"},
            [{model: '4037-Evolve 2'},{model: '4060-Ideal'},{model: '5020-Evolve'}],
            {series: "ONE TOUCH POP"},
            [{model: '4015-Pop C1'},{model: '4033-Pop C3'},{model: '5050 Pop-S3'}],
            {series: "SMARTPHONE"},
            [{model: '4013-Pixi 3 (4.0)'},{model: '5017-Pixi 3(4.5)'},{model: '5026-Alcatel 3C'}],
            {series: "ALCATEL TABLET"},
            [{model: '9002-Pixi 3 7 3G'},{model: '9007-Pixi 3 7'},{model: '9015-Pop 7 4G'}],
            {series: "BASIC PHONE"},
            [{model: '2017b-Fling'},{model: '4044-Go Flip'},{model: 'A392A'}]
        ]
    ],
    {type: 'Computer Parts'},
    [
        {company: "Acer"},
        [{series: 'Aspire'}, [{model: "5551"},{model: '5560'}]]
    ]
];

// 获取导航容器
const navContainer = document.getElementById('nav-container');

// 遍历Type和对应的公司列表（每两个元素一组）
for (let i = 0; i < Navitems.length; i += 2) {
    const currentType = Navitems[i].type;
    const companiesGroup = Navitems[i + 1];
    
    // 拼接当前Type的下拉导航HTML
    let dropdownHTML = `
    <div class="dropdown d-inline-block" id="${currentType.replace(/\s+/g, '')}">
        <div id="type">
            <span class="dropdown-toggle" id="type-${currentType}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${currentType.toUpperCase()}</span>
        </div>
        <div class="dropdown-menu" aria-labelledby="type-${currentType}">
            <div class="d-flex flex-row" style="width: 1000px; min-height: 400px;">
                <!-- 左侧公司栏 -->
                <div id="leftbar" class="d-flex flex-column" style="width: 250px; background-color: rgba(228, 226, 226, 0.829);">
                    <div id="company">
    `;
    
    // 遍历公司和对应的系列列表（每两个元素一组）
    for (let j = 0; j < companiesGroup.length; j += 2) {
        const currentCompany = companiesGroup[j].company;
        dropdownHTML += `<a class="dropdown-item" href="#">${currentCompany}</a>`;
    }
    
    dropdownHTML += `
                    </div>
                </div>
                <!-- 右侧系列和型号栏 -->
                <div id="rightbar" class="d-flex flex-wrap">
    `;
    
    // 再次遍历公司，生成右侧的系列和型号内容
    for (let j = 0; j < companiesGroup.length; j += 2) {
        const currentCompany = companiesGroup[j].company;
        const seriesGroup = companiesGroup[j + 1];
        
        // 遍历系列和对应的型号列表（每两个元素一组）
        for (let k = 0; k < seriesGroup.length; k += 2) {
            const currentSeries = seriesGroup[k].series;
            const models = seriesGroup[k + 1];
            
            dropdownHTML += `
            <div class="d-flex flex-column" style="min-width: 250px;">
                <a class="dropdown-item" href="#"><h4>${currentSeries}</h4></a>
            `;
            
            // 遍历型号
            models.forEach(model => {
                dropdownHTML += `<a class="dropdown-item" href="#">${model.model}</a>`;
            });
            
            dropdownHTML += `</div>`;
        }
    }
    
    dropdownHTML += `
                </div>
            </div>
        </div>
    </div>
    `;
    
    // 将当前Type的下拉导航插入容器
    navContainer.innerHTML += dropdownHTML;
}

3. 关键细节说明 #

• 我们用i += 2、j += 2、k += 2的方式跳过成对的元素，直接遍历每组数据，比你之前的i%2==0判断更高效
• 给每个下拉组件的ID做了处理（replace(/\s+/g, '')），避免空格导致的ID无效问题
• 完全复用了你示例里的Bootstrap类名（dropdown、dropdown-toggle等），确保样式和交互和示例一致
• 用模板字符串拼接HTML，代码结构清晰，便于维护

三、注意事项 #

1. 确保页面已经引入Bootstrap的CSS和JS（因为你的示例用了Bootstrap的下拉组件），否则下拉交互不会生效
2. 如果需要给每个链接添加真实的跳转地址，可以在Navitems数组里补充url字段，比如{model: 'A1-810', url: '/products/mobile/acer/iconia-a/a1-810'}，然后在渲染时把href="#"改成href="${model.url}"

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