Javascript與對象建立樹型視圖

Question

幾周前我開始使用JavaScript和Jquery。現在在辦公室，我必須建立一個包含Child和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>