Javascriptオブジェクトを持つtreeViewを構築する

Question

私は数週間前にJavascriptとJqueryで作業を始めました。今私は、子とgrandChildなどを含むオブジェクトを構築する必要があります。

私は再帰関数を実行するのが最善の方法を知っていますが、それを理解することはできません。私は仕事することができたけど、すぐに私は私が失敗2レベルを...持っているように

私はこのデータを持っている：

dataTest = [ 
     { que_code: "BM1", que_enonce: "Test 1", que_id: "1", que_id_parent: null }, 
     { que_code: "BM2", que_enonce: "Test 2", que_id: "2", que_id_parent: 1 }, 
     { que_code: "BM3", que_enonce: "Test 3", que_id: "3", que_id_parent: 1 }, 
     { que_code: "BM4", que_enonce: "Test 4", que_id: "4", que_id_parent: null }, 
     { que_code: "BM5", que_enonce: "Test 5", que_id: "5", que_id_parent: 3 }, 
    ]; 

私は、次の

• BM1 を与える必要があり、結果を
  • BM2
  • BM3
    • BM5
• BM4

任意の助けいただければ幸いです。ここでは、事前

Answer 1

で

おかげで、あなたがこれを行うことができますどのように、あなたが最初にreduce()の方法でそのツリーデータ構造を作成するために、再帰を使用することができ、その後、あなたがその新しいデータ構造からHTMLを構築する別の再帰関数を作成することができますです。

var dataTest = [ 
 
    { que_code: "BM1", que_enonce: "Test 1", que_id: "1", que_id_parent: null }, 
 
    { que_code: "BM2", que_enonce: "Test 2", que_id: "2", que_id_parent: 1 }, 
 
    { que_code: "BM3", que_enonce: "Test 3", que_id: "3", que_id_parent: 1 }, 
 
    { que_code: "BM4", que_enonce: "Test 4", que_id: "4", que_id_parent: null }, 
 
    { que_code: "BM5", que_enonce: "Test 5", que_id: "5", que_id_parent: 3 }, 
 
]; 
 

 
function makeTree(data, parent = null) { 
 
    return data.reduce(function(r, e) { 
 
    if (e.que_id_parent == parent) { 
 
     e.child = makeTree(data, e.que_id) 
 
     r.push(e) 
 
    } 
 
    return r; 
 
    }, []) 
 
} 
 

 
function toHtml(data, parent) { 
 
    data.forEach(function(e) { 
 
    var li = $('<li></li>') 
 
    li.text(e.que_code) 
 
    if (e.child.length) { 
 
     var ul = $('<ul></ul>'); 
 
     ul.append(toHtml(e.child, ul)); 
 
    } 
 
    li.append(ul) 
 
    parent.append(li) 
 
    }) 
 
} 
 

 
var newData = makeTree(dataTest, null); 
 
toHtml(newData, $('ul'));

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

 
<!-- DON'T FORGET THIS UL --> 
 
<ul></ul>