Javascript:使用递归迭代对象来构建导航列表

Question

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

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

我能够得到以下结果，但由于每个对象内的两个对象属性，我得到了双倍。查看工作FIDDLE在这里。

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 结果:

• 标题1
  • 标题1
  • 标题1
• 标题2
  • 标题21
    • 标题21
    • 标题21
  • 标题22
    • 标题22
    • 标题22
  • 标题2
  • 标题2

Answer 1

如果您可以控制导航数据的结构，我建议如下。通过这种方式，您可以专门定义导航项是否有子项，并使一切变得更加清晰。

数据

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;
}