从json结构创建带有子项的列表

creating list with sub items from json structure

本文关键字：列表 json 结构 创建      更新时间：2023-09-26

我正在创建一个列表，下面的代码包含在这个小提琴

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

我得到的输出是，除了大约。

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

我如何让孩子们出现，所以我得到

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

试试这样:

<<p> 在线演示/strong> 
$(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>');
});

你所要做的就是检查你的对象是否有child项，如果你再次执行getMenu(node.child)函数，如:

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