ツリービューの再帰関数を実行するにはどうすればよいですか？

Question

ネストされた順序なしリスト（<ul>）を使用してツリービューをレンダリングするには、次のデータプロパティを使用するにはどうすればよいですか。

// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent 
// sequence represents the order of the element in the branch 
// level represents the tree level of the element, root nodes will have a level of 1 
var data = [ 
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 }, 
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 }, 
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 }, 
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 }, 
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 }, 
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 } 
]; 

結果は次のようになります。

A 
    Alan 
    Abe 
B 
    Bir 
    Boromir 

私はforループを試してみましたが、すぐに私は子ノードを取得するためのコードを繰り返していたと私はにそれをリファクタリングすることができませんでした再帰関数。

ここでデータとCodePenだ：...私はOPの質問の一部以下にお答えしますhttp://codepen.io/nunoarruda/pen/KgVPmv

Answer 1

私は、ネストされた順序付けられていないを使用して、ツリービューをレンダリングするために、次のデータのプロパティを使用するにはどうすればよい

リスト（）？

与えられたデータ構造では、再帰的解決の必要はありません。 sortの組み合わせ提供されたデータのリストをINGの、その後、具体的なreduceコールバックを経由して、それを変換するには、すでに仕事は...

var 
    dataList = [ 
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 }, 
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 }, 
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 }, 
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }, 
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 }, 
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 } 
    ], 

    htmlListFragment = dataList.sort(function (a, b) { 

    // sort by `level` or, if both are equal (sub)sort by `sequence` 
    return (a.level - b.level) || (a.sequence - b.sequence); 

    }).reduce(function (collector, item) { 
    var 
     registry = collector.registry, 
     fragment = collector.htmlListFragment, 

     parentId = item.parentId, 
     id  = item.id, 
     name  = item.name, 

     member = registry[id]; 

    if (!member) { 

     member = registry[id] = document.createElement("li"); 
     member.id = id; 
     member.appendChild(document.createTextNode(name)); 
     member.appendChild(document.createElement("ul")); 

     if ((item.level === 1) && (item.parentId === "0")) { 

     fragment.appendChild(member); 
     } else { 
     registry[parentId].getElementsByTagName("ul")[0].appendChild(member); 
     } 
    } 

    return collector; 

    }, { 

    registry  : {}, 
    htmlListFragment: document.createElement("ul") 

    }).htmlListFragment; 


console.log("htmlListFragment : ", htmlListFragment)