javascript - 使用 JSON 将多级项添加到无序列表

Question

我需要使用下面的 json 对象构建嵌套无序列表，每个 json 对象都有 id 和父 id，根或顶部元素父 id 为 0

 JSON Object 

{
   "menu": [
         {"id":1,"name":"Dashboard","parent":0},
         {"id":2,"name":"Dashboard1","parent":0 },
         {"id":3,"name":"Dashboard2","parent":0},
         {"id":4,"name":"Dashboard3","parent":0},
         {"id":5,"name":"Dashboard4","parent":1},
         {"id":6,"name":"Dashboard5","parent":1},
         {"id":7,"name":"Dashboard6","parent":1},
         {"id":8,"name":"Dashboard7","parent":2},
         {"id":9,"name":"Dashboard8","parent":5}
          ]

}

预期结果 ：

<ul class="menu" >
    <li >Dashboard</li>
    <li >Dashboard1
        <ul>
            <li> Dashboard4</li>
            <li> Dashboard5
                <ul>
                    <li> Dashboard8</li>                                                
                </ul>
            </li>
            <li> Dashboard6</li>                            
        </ul>
    </li>
    <li >Dashboard2
        <ul>
            <li> Dashboard7</li>                                                
        </ul>
    </li>
    <li >Dashboard3</li>                
</ul>

我试过了

 menuArr=[];
  $.each(menu,function(i,val){
     var parent=$(".menu");
     if(val.parent!=0){
        parent= menuArr[val.parent];
     }
     menuLi= $('<li>'+val.name+'</li>');
     parent.append(menuli);
     menuArr[val.id]=menuli;

  }); 

Answer 1

那这个呢？

http://jsfiddle.net/LCFH5/2/

HTML

<ul id="menu"></ul>

JS

$(function() {

    var data = {
        "menu": [
            {"id":5,"name":"Dashboard4","parent":1},
            {"id":1,"name":"Dashboard","parent":0},
            {"id":2,"name":"Dashboard1","parent":0 },
            {"id":3,"name":"Dashboard2","parent":0},
            {"id":4,"name":"Dashboard3","parent":0},
            {"id":6,"name":"Dashboard5","parent":1},
            {"id":7,"name":"Dashboard6","parent":1},
            {"id":8,"name":"Dashboard7","parent":2},
            {"id":9,"name":"Dashboard8","parent":5}
        ]
    };

    var ul = $('#menu');
    var items = data.menu;
    var add = function(item) {

        var parent;

        if(item.parent > 0) {

            parent = ul.find('#n' + item.parent + ' > ul');

            if(parent.length < 1) {

                $.each(items, function(i) {

                    if(this.id === item.parent) {

                        parent = add(items.splice(i, 1)[0]);

                        return false;

                    }

                });

            }

        } else {

            parent = ul;

        }

        return parent.append('<li id="n' + item.id + '">' + item.name + '<ul></ul></li>');

    };

    while(items.length > 0) {

        add(items.shift());

    }

});

它更清晰，并关心未排序的数据。

Answer 2

试试这个：- http://jsfiddle.net/ngRns/

  var root;
for (var key in json) {
    root = key;
    break
}
var ul = $('<ul>',{'class':key,'data-level':0});

var prev = undefined;
$.each(json[root], function (_, obj) {
    if (prev && obj.parent > prev.parent) {
        ('[data-level=' + prev.parent + ']', ul).find('li:last').append($('<ul data-level=' + obj.parent + '>'));
    }
    ul.find('[data-level=' + obj.parent + ']').andSelf().last().append($('<li>', {
        text: obj.name
    }));
    prev = obj;
});

更新 http://jsfiddle.net/XAcqf/

var ul = $('', { 'class': key });

$.each(json[root], function (_, obj) {
    var li = ul.find('li#' + obj.parent);
    if (li.length != 0) {
        li.last().append($('<ul>').append($('<li>', {
            text: obj.name,
            id: obj.id
        })));;
    } else {
        ul.append($('<li>', {
            text: obj.name,
            id: obj.id
        }));
    }

});

Answer 3

从这个标记开始：

<ul class="menu"></ul>

还有这个（我把 JSON 放在一个对象中，因为我不知道你的来源：

var myj = {
    "menu": [{
        "id": 1,
            "name": "Dashboard",
            "parent": 0
    }, {
        "id": 2,
            "name": "Dashboard1",
            "parent": 0
    }, {
        "id": 3,
            "name": "Dashboard2",
            "parent": 0
    }, {
        "id": 4,
            "name": "Dashboard3",
            "parent": 0
    }, {
        "id": 5,
            "name": "Dashboard4",
            "parent": 1
    }, {
        "id": 6,
            "name": "Dashboard5",
            "parent": 1
    }, {
        "id": 7,
            "name": "Dashboard6",
            "parent": 1
    }, {
        "id": 8,
            "name": "Dashboard7",
            "parent": 2
    }, {
        "id": 9,
            "name": "Dashboard8",
            "parent": 5
    }]
};

我使用了这段代码：

menuArr = [];
$.each(myj.menu, function (i, val) {
    var menuLi
    var parent = $(".menu");
    if (val.parent != 0) {
        parent = menuArr[val.parent];
    }
    menuLi = $('<li>' + val.name + '</li>');
    parent.append(menuLi);
    menuArr[val.id] = menuLi;
});

发现问题：

• 数据没有对象（JSON）......没什么大不了的
• 你的 menuLi 在某些地方是 menuli

示例：http: //jsfiddle.net/xnfQk/