javascript - 使用 json 结构中的子项创建列表

Question

我正在使用以下代码创建一个列表，该代码包含在 this fiddle 中.

<ul></ul>


var myList = [{
        "title": "Home",
            "sub": 0,
            "url": "/home",
            "show": 1
    }, {
        "title": "News",
            "sub": 0,
            "url": "/news",
            "show": 1
    }, {
        "title": "About",
            "sub": 1,
            "url": "/about",
            "show": 1,
        child: [{
            "title": "Contact",
                "sub": 0,
                "url": "/about/contact",
                "show": 1
        }]
    }, {
        "title": "Other",
            "sub": 0,
            "url": "/other",
            "show": 0
    }];

    $.each(myList, function (entryIndex, entry) {
        var title = this.title;
        var show = "";
        var sub = '';
        var url = this.url;
        if (!this.show) {
            show = "style=color:grey;";
        }
        if (this.sub) {
            sub = $("ul").append(this.child.text);
            console.log(sub);
        }
        $("ul").append("<li " + show + "> " + title + sub + "</li>");
    });

我得到的输出是，除了 about 的子项之外，它按预期工作。

<ul>
    <li> Home</li>
    <li> News</li>
    <li> About[object Object]</li>
    <li style="color:grey;"> Other</li>
</ul>

我该如何让 children 出现，以便我明白

<ul>
    <li> Home</li>
    <li> News</li>
    <li> About
        <ul>
           <li> Contact</li>
        </ul>
    </li>
    <li style="color:grey;"> Other</li>
</ul>

Answer 1

尝试这样的事情:

<强> Online Demo

$(document).on('ready',function(){

var data =  [{/*... your data*/}] ;

var endMenu =getMenu(data);

    function getMenu(d ){
          return d.map(function(node){

              var subMenu = ( node.child && node.child.length > 0) ? '<ul>'+ getMenu(node.child) + '</ul>' : "";
               return '<li>'+node.title +  subMenu + '</li>' ;
           });
       }
      $('#menu').html('<ul>'+endMenu.join('')+ '</ul>');
});

您所要做的就是检查您的对象是否有子项，以及是否再次执行该函数getMenu(node.child)，例如:

var subMenu = ( node.child && node.child.length > 0) ? '<ul>'+ getMenu(node.child) + '</ul>' : "";

希望这将指导您在您的版本中实现它。