Flaches Array zu Baum Array mit lodash.js

Question

Ich versuche, ein flaches Array zu Tree-Array zu konvertieren, da ich die Daten in jsTree verwenden werde. Außerdem muss ich Schlüsselnamen wie "Name" in "Text" umwandeln.
Ich möchte lodash.js verwenden, aber ich bin wirklich Neuling auf lodash. Ich suchte nach der Lösung, aber ich konnte keine finden, die zu meinem Fall passte.
Also können Sie dabei helfen? Meine Wohnung Array-Daten ist unter:

[ 
    { 
     Id:1, 
     Name: 'name1', 
     Parent: 0 
    }, 
    { 
     Id:2, 
     Name: 'name2', 
     Parent: 1 
    }, 
    { 
     Id:3, 
     Name: 'name3', 
     Parent: 2 
    }, 
    { 
     Id:4, 
     Name: 'name4', 
     Parent: 1 
    }, 
    { 
     Id:5, 
     Name: 'name5', 
     Parent: 1 
    }, 
    { 
     Id:6, 
     Name: 'name6', 
     Parent: 5 
    } 
] 

Ich möchte wie Baumdaten haben:

{ 
    "id": 1, 
    "text" : "name1", 
    "children" : [ 
     { 
      "id": 2, 
      "text" : "name2", 
      "children" : [{ 
       "id": 3, 
       "text": "name3" 
      }] 
     }, 
     { 
      "id": 4, 
      "text" : "name4" 
     }, 
     { 
      "id": 5, 
      "text" : "name5", 
      "children" : [{ 
       "id": 6, 
       "text": "name6" 
      }] 
     } 
    ] 
} 

Vielen Dank im Voraus

Answer 1

Dies ist ein Vorschlag im Klar Javascript für unsortierte Daten.

var data = [{ Id: 1, Name: 'name1', Parent: 0 }, { Id: 2, Name: 'name2', Parent: 1 }, { Id: 3, Name: 'name3', Parent: 2 }, { Id: 4, Name: 'name4', Parent: 1 }, { Id: 5, Name: 'name5', Parent: 1 }, { Id: 6, Name: 'name6', Parent: 5 }], 
 
    tree = function (data, root) { 
 
     var r; 
 
     data.forEach(function (a) { 
 
      this[a.Id] = { id: a.Id, text: a.Name, children: this[a.Id] && this[a.Id].children }; 
 
      if (a.Parent === root) { 
 
       r = this[a.Id]; 
 
      } else { 
 
       this[a.Parent] = this[a.Parent] || {}; 
 
       this[a.Parent].children = this[a.Parent].children || []; 
 
       this[a.Parent].children.push(this[a.Id]); 
 
      } 
 
     }, Object.create(null)); 
 
     return r; 
 
    }(data, 0); 
 

 
document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');

Answer 2

Wenn Sie nicht sicher sind, wenn das Kind nicht vor Eltern erscheinen können, dann können Sie diesen Code verwenden:

var t = [{ Id: 1, Name: 'name1', Parent: 0 }, { Id: 2, Name: 'name2', Parent: 1 }, { Id: 3, Name: 'name3', Parent: 2 }, { Id: 4, Name: 'name4', Parent: 1 }, { Id: 5, Name: 'name5', Parent: 1 }, { Id: 6, Name: 'name6', Parent: 5 }]; 
 

 
var elements = []; 
 
t.forEach(function(element) { 
 
\t elements[element.Id] = { 
 
\t \t id: element.Id, 
 
\t \t text: element.Name, 
 
\t \t parent: element.Parent, 
 
\t \t children: [] 
 
\t } 
 
}); 
 

 
elements.forEach(function(element) { 
 
\t elements[element.parent] && elements[element.parent].children.push(element); 
 
\t delete element.parent; 
 
}) 
 

 
document.write(['<pre>', JSON.stringify(elements[1], 0, 3), '</pre>'].join(''));

Answer 3

So etwas wie

return _(data).map(function(val) { val.children = []; }) 
.map(function(val, key) { 
    data[val.parent].children.push(val); 
}); 

Missbrauch der Array-Indizierung. Möglicherweise müssen Sie zuerst eine Hilfskarte von Id bis index in den Quelldaten erstellen.

Dies ist nur Vanille Verwendung von Array.map, so dass für diese Lösung lodash nicht benötigt wird.

Answer 4

Die folgende Funktion erstellt einen Baum aus einer Liste von Objekten. Es ist nicht zu jedem Format eng.

function buildTree(flatList, idFieldName, parentKeyFieldName, fieldNameForChildren) { 
    var rootElements = []; 
    var lookup = {}; 

    flatList.forEach(function (flatItem) { 
     var itemId = flatItem[idFieldName]; 
     lookup[itemId] = flatItem; 
     flatItem[fieldNameForChildren] = []; 
    }); 

    flatList.forEach(function (flatItem) { 
     var parentKey = flatItem[parentKeyFieldName]; 
     if (parentKey != null) { 
     var parentObject = lookup[flatItem[parentKeyFieldName]]; 
     if(parentObject){ 
      parentObject[fieldNameForChildren].push(flatItem); 
     }else{ 
      rootElements.push(flatItem); 
     } 
     } else { 
     rootElements.push(flatItem); 
     } 

    }); 

    return rootElements; 
    } 

Here is a fiddle Verwenden Sie Ihr Beispiel als Eingabe.

Die ursprüngliche Quelle comes from this answer.