如何用JavaScript/jQuery遍历嵌套对象数组并获取值？

嘿，我来帮你搞定这个嵌套菜单数组的遍历和渲染问题！先看看你的原始数据结构，这是一个包含多个主菜单对象的数组，每个主菜单下又有多个子菜单，子菜单里还有具体的页面权限信息。

你的原始数据结构 #

var object = [{ 
    "mainMenu": "MainMenu1", 
    "Submenu": [ 
        { "SubMenu1": [ 
            { "name": "SubMenu1 page1", "access": "Read" }, 
            { "name": "SubMenu1 page2", "access": "Write" } 
        ] }, 
        { "SubMenu2": [ 
            { "name": "SubMenu2 page1", "access": "Read" }, 
            { "name": "SubMenu2 page2", "access": "Write" } 
        ] }, 
        { "SubMenu3": [ 
            { "name": "SubMenu3 page1", "access": "Read" }, 
            { "name": "SubMenu3 page2", "access": "Write" } 
        ] } 
    ] 
}, { 
    "mainMenu": "MainMenu1", 
    "Submenu": [ 
        { "SubMenu1": [ 
            { "name": "SubMenu1 page1", "access": "Read" }, 
            { "name": "SubMenu1 page2", "access": "Write" } 
        ] }, 
        { "SubMenu2": [ 
            { "name": "SubMenu2 page1", "access": "Read" }, 
            { "name": "SubMenu2 page2", "access": "Write" } 
        ] }, 
        { "SubMenu3": [ 
            { "name": "SubMenu3page1", "access": "Read" } 
        ] } 
    ] 
}];

你尝试的代码问题 #

你之前的嵌套for...in循环有点混乱，比如直接拼接e1（这是整个主菜单对象，不是mainMenu的文本值），而且没有正确遍历子菜单的键名和对应的页面列表，导致渲染的内容不符合预期。

正确的实现方案 #

我们可以用嵌套的forEach循环（比for...in更适合数组遍历），逐层解析每个层级的数据，然后动态构建HTML结构并插入到页面中：

// 遍历每个主菜单对象
object.forEach(mainMenuObj => {
    // 创建主菜单容器
    const mainMenuDiv = $('<div class="main"></div>');
    // 添加主菜单标题
    mainMenuDiv.append(`<h4>${mainMenuObj.mainMenu}</h4>`);
    // 创建子菜单列表
    const subMenuUl = $('<ul></ul>');

    // 遍历当前主菜单下的所有子菜单
    mainMenuObj.Submenu.forEach(subMenuItem => {
        // 子菜单是一个键值对对象，获取子菜单名称和对应的页面列表
        const subMenuName = Object.keys(subMenuItem)[0];
        const pages = subMenuItem[subMenuName];
        
        // 创建子菜单项
        const subMenuLi = $('<li></li>').text(subMenuName);
        // 创建页面列表
        const pagesUl = $('<ul></ul>');
        
        // 遍历每个页面，添加页面名称和权限
        pages.forEach(page => {
            pagesUl.append(`<li>${page.name} (${page.access})</li>`);
        });
        
        // 把页面列表添加到子菜单项中
        subMenuLi.append(pagesUl);
        // 把子菜单项添加到子菜单列表
        subMenuUl.append(subMenuLi);
    });

    // 把子菜单列表添加到主菜单容器
    mainMenuDiv.append(subMenuUl);
    // 把主菜单容器添加到页面的.div1元素中
    $('.div1').append(mainMenuDiv);
});

代码说明 #

1. 外层forEach：遍历数组中的每个主菜单对象，获取mainMenu的名称。
2. 中间forEach：遍历每个主菜单下的Submenu数组，每个子菜单是一个单键对象，用Object.keys()获取子菜单的名称，再拿到对应的页面列表。
3. 内层forEach：遍历每个子菜单下的页面数组，渲染每个页面的名称和权限信息。
4. 全程用jQuery的DOM创建方法（$('<div>')）来构建元素，比直接拼接HTML字符串更安全、易维护。

这样就能正确遍历所有层级的数据，并且把菜单结构清晰地渲染到页面上啦！

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