jsonを使用してツリービューを生成

Question

jQueryとJSONを使用してツリービューを生成したい。

私のJSON（単一のフォルダ）：

[{"id":"076ac97d","path":"\/test\/undefined","name":"undefined","parentDirName":"test","parentDirId":"70b77ddd-6c15"}, .... ] 

フォルダがルートである場合には、parentDirIdキーが空の値を持っている： ""、カタログにある場合、親IDを持っています。

ul liリストツリーを生成したい。

このJSONで反復処理を行い、ul liリストをhtmlに追加する方法はありますか？

$.ajax({ 
    type: "GET", 
    url: ajaxUrl, 
    dataType: "json", 
    contentType: "application/json", 

    success: function(response){ 
    //code 
    } 

どのようにディレクトリツリーを生成する：

私はAJAXがありますか？最初に、parentIDを持つdirにdirを追加します。

Answer 1

私はあなたがこの

function listItem(obj) { 
 
    var html = "<ul>" 
 
    jQuery.each(obj, function(key, value) { 
 
    html += "<li>" + key + ':' 
 
    if (typeof value !== "object") 
 
     html += value 
 
    else 
 
     html += listItem(value) 
 
    html += "</li>" 
 
    }) 
 
    return html + "</ul>" 
 
} 
 

 
var obj = { 
 
    "id": "076ac97d", 
 
    "rawr": { 
 
    "mew": 2 
 
    }, 
 
    "path": "\/test\/", 
 
    "name ": "undefined", 
 
    "parentDirName ": "test", 
 
    "parentDirId ": "70 b77ddd " 
 
}; 
 
document.write(listItem(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

あなたは、以下の機能を使用できるようなものを意味推測しています。まず、idでキーを付けられた新しいオブジェクト構造を作成します。これにより、各ノードの親のクイックルックアップが可能になります。同時に、それは空のUL要素とともに、それぞれの要素に対してLI要素を作成します。最後に、これらすべてのLIとUL要素は親子関係に応じて相互にリンクされています。これが機能するために

function populateUL($ul, data) { 
 
    // Register the given UL element as the root in a new data structure 
 
    var hash = { 
 
     "": { $ul: $ul } 
 
    }; 
 
    // Key the objects by their id, and create individual LI elements for them, 
 
    // and an empty UL container for their potential child elements 
 
    data.forEach(function (o) { 
 
     var $ul = $("<ul>"); 
 
     hash[o.id] = { 
 
      $ul: $ul, 
 
      $li: $("<li>").text(o.name).append($ul) 
 
     }; 
 
    }); 
 
    // Append each LI element to the correct parent UL element 
 
    data.forEach(function (o) { 
 
     hash[o.parentDirId].$ul.append(hash[o.id].$li); 
 
    }); 
 
} 
 

 
// Sample response object 
 
var response = [{ 
 
    "id":"70b77ddd-6c15", 
 
    "path":"/test", 
 
    "name":"test", 
 
    "parentDirName":"", 
 
    "parentDirId":"" 
 
}, { 
 
    "id":"076ac97d", 
 
    "path":"/test/chess", 
 
    "name":"chess", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97e", 
 
    "path":"/test/bingo", 
 
    "name":"bingo", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97f", 
 
    "path":"/test/chess/major pieces", 
 
    "name":"major pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076ac97g", 
 
    "path":"/test/chess/major pieces/rook", 
 
    "name":"rook", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076ac97h", 
 
    "path":"/test/chess/major pieces/queen", 
 
    "name":"queen", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076b0000", 
 
    "path":"/test/chess/minor pieces", 
 
    "name":"minor pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076b0001", 
 
    "path":"/test/chess/minor pieces/knight", 
 
    "name":"knight", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}, { 
 
    "id":"076b0002", 
 
    "path":"/test/chess/minor pieces/bishop", 
 
    "name":"bishop", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}]; 
 

 
// Inject response data into document 
 
populateUL($("#root"), response);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="root"></ul>

は、ルート要素はに空の文字列によって参照されなければなりませんparentDirId。これらは冗長な情報を含んでいるので

注特性がパスとparentDirNameすなわち、このアルゴリズムで使用されていません。