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/