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

• TITLE1
  • TITLE1
  • TITLE1
• TITLE2
  • title21
    • title21
    • title21
  • title22
    • title22
    • title22
    < / LI>
  • TITLE2
  • TITLE2

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

Answer 2

如果你控制了导航数据的结构，你可以实现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;
}