Javascript Erstellen eines treeView mit Objekt

Question

Ich begann vor ein paar Wochen mit Javascript und Jquery zu arbeiten. Jetzt im Büro muss ich ein Objekt bauen, das Child und grandChild und etc ..

Ich weiß, der beste Weg wäre, eine rekursive Funktion auszuführen, aber es nicht herausfinden kann. Ich in der Lage gewesen zu arbeiten, aber sobald ich 2 Level Habe ich nicht ...

Ich habe diese Daten:

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 }, 
    ]; 

ich führen sollte folgende

• BM1 geben
  • BM2
  • BM3
    • BM5
• SM4

Jede Hilfe würde geschätzt.

Vielen Dank im Voraus

Answer 1

Hier ist, wie Sie dies tun können, können Sie zunächst Rekursion verwenden, dass die Baumdatenstruktur mit reduce() Methode zu erstellen und dann können Sie eine andere rekursive Funktion erstellen, die HTML-Code aus dieser neuen Datenstruktur aufbauen .

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>