Javascript:通过递归迭代对象来构建导航列表

Javascript: iterate through object with recursion to build navigation list

本文关键字：构建 导航 列表 对象 迭代 递归 Javascript      更新时间：2023-09-26

如何使用以下对象构建多级导航。

var obj = {
    1:{
        title: "title1",
        link: "link1"
    },
    2:{
        title: "title2",
        link: "link2",
        1:{
            title: "title21",
            link: "link21"
        },
        2:{
            title: "title22",
            link: "link22"
        }
    }
}

我能够得到下面的结果，但我得到双倍，因为每个对象内部的两个对象属性。

function menuWalker(obj) {
    var html = '<ul>';
    for (var property in obj){
        if (obj.hasOwnProperty(property)) {
            html += '<li>';
            console.log(obj[property]);
            if (typeof obj[property] == "object"){
                html += '<a href="' + obj[property].link + '">' + obj[property].title + '</a>';
                html +=  menuWalker(obj[property]);
            }else{
                html += '<a href="' + obj.link + '">' + obj.title + '</a>';
            }
            html += '</li>';
        }
    }
    html += '</ul>';
    return html;
}

当前Html结果:

  • title1
    • title1
    • title1
  • title2
    • title21
      • title21
      • title21
    • title22
      • title22
      • title22
    • title2
    • title2

如果您可以控制导航数据的结构，我建议如下。通过这种方式，您可以明确定义导航项是否有子项，并使所有内容更清晰。

数据
var obj = [
    {
        title: "title1",
        link: "link1",
        children: []
    },
    {
        title: "title2",
        link: "link2",
        children: [
            {
                title: "title21",
                link: "link21"
            },
            {
                title: "title22",
                link: "link22"
            }
        ]
    }
];
沃克

function menuWalker(obj) {
    var html = '<ul>';
    for (var property in obj){
        if (obj.hasOwnProperty(property)) {
            html += '<li>';
            html += '<a href="' + obj[property].link + '">' + obj[property].title + '</a>';
            if (obj[property].children && obj[property].children.length > 0){
                html +=  menuWalker(obj[property].children);
            }
            html += '</li>';
        }
    }
    html += '</ul>';
    return html;
}

如果你已经控制了导航数据的结构，你就可以实现Nerdwood的答案。

但如果你没有控制，你可以试试:

沃克

function menuWalker(obj) {
    var html = '<ul>';
    for (var property in obj) {
        if (obj.hasOwnProperty(property) && typeof obj[property] == "object") {
            html += '<li>' + childrenMenuWalker(obj[property]) + '</li>';
        }
    }
    html += '</ul>';
    return html;
}
function childrenMenuWalker(obj) {
    var html = '';
    if (obj.hasOwnProperty('title') && obj.hasOwnProperty('link')) {
        html += '<a href="' + obj.link + '">' + obj.title + '</a>';
    }
    var hasChildren = false;
    var childrenHtml = '<ul>';
    for (var property in obj) {
        if (obj.hasOwnProperty(property) && typeof obj[property] == "object") {
            hasChildren = true;
            childrenHtml += '<li>' + childrenMenuWalker(obj[property]) + '</li>';
        }
    }
    childrenHtml += '</ul>';
    if (hasChildren) {
        html += childrenHtml;
    }
    return html;
}
相关文章：