How can I loop through a Javascript object array assigning objects as children of other objects within? Tree/hierarchical structure
Question
I need help looping through the following object array to reorganize everything into a hierarchy/tree. How do I achieve this? Any help is appreciated.
[
{
"id":1,
"parentId":null,
"value":"Root Parent 01",
"children":[]
},
{
"id":8,
"parentId":null,
"value":"Root Parent 02",
"children":[]
},
{
"id":36,
"parentId":15,
"value":"Child 01",
"children":[]
},
{
"id":43,
"parentId":15,
"value":"Child 02",
"children":[]
},
{
"id":50,
"parentId":15,
"value":"Child 03",
"children":[]
},
{
"id":15,
"parentId":null,
"value":"Root Parent 03",
"children":[]
},
{
"id":57,
"parentId":22,
"value":"Child 04",
"children":[]
},
{
"id":64,
"parentId":22,
"value":"Child 05",
"children":[]
},
{
"id":71,
"parentId":22,
"value":"Child 06",
"children":[]
},
{
"id":78,
"parentId":22,
"value":"Child 07",
"children":[]
},
{
"id":85,
"parentId":22,
"value":"Child 08",
"children":[]
},
{
"id":92,
"parentId":22,
"value":"Child 09",
"children":[]
},
{
"id":99,
"parentId":22,
"value":"Child 10",
"children":[]
},
{
"id":106,
"parentId":22,
"value":"Child 11",
"children":[]
},
{
"id":22,
"parentId":null,
"value":"Root Parent 04",
"children":[]
},
{
"id":113,
"parentId":29,
"value":"Child 12",
"children":[]
},
{
"id":115,
"parentId":29,
"value":"Child 13",
"children":[]
},
{
"id":122,
"parentId":29,
"value":"Child 14",
"children":[]
},
{
"id":129,
"parentId":29,
"value":"Child 15",
"children":[]
},
{
"id":136,
"parentId":29,
"value":"Child 16",
"children":[]
},
{
"id":143,
"parentId":29,
"value":"Child 17",
"children":[]
},
{
"id":157,
"parentId":150,
"value":"Child 18",
"children":[]
},
{
"id":150,
"parentId":29,
"value":"Child 19",
"children":[]
},
{
"id":29,
"parentId":null,
"value":"Root Parent 05",
"children":[]
}
]
Desired object array:
[
{
"id":1,
"parentId":null,
"value":"Root Parent 01",
"children":[]
},
{
"id":8,
"parentId":null,
"value":"Root Parent 02",
"children":[]
},
{
"id":15,
"parentId":null,
"value":"Root Parent 03",
"children":[
{
"id":36,
"parentId":15,
"value":"Child 01",
"children":[]
},
{
"id":43,
"parentId":15,
"value":"Child 02",
"children":[]
},
{
"id":50,
"parentId":15,
"value":"Child 03",
"children":[]
}
]
},
{
"id":22,
"parentId":null,
"value":"Root Parent 04",
"children":[
{
"id":57,
"parentId":22,
"value":"Child 04",
"children":[]
},
{
"id":64,
"parentId":22,
"value":"Child 05",
"children":[]
},
{
"id":71,
"parentId":22,
"value":"Child 06",
"children":[]
},
{
"id":78,
"parentId":22,
"value":"Child 07",
"children":[]
},
{
"id":85,
"parentId":22,
"value":"Child 08",
"children":[]
},
{
"id":92,
"parentId":22,
"value":"Child 09",
"children":[]
},
{
"id":99,
"parentId":22,
"value":"Child 10",
"children":[]
},
{
"id":106,
"parentId":22,
"value":"Child 11",
"children":[]
}
]
},
{
"id":29,
"parentId":null,
"value":"Root Parent 05",
"children":[
{
"id":113,
"parentId":29,
"value":"Child 12",
"children":[]
},
{
"id":115,
"parentId":29,
"value":"Child 13",
"children":[]
},
{
"id":122,
"parentId":29,
"value":"Child 14",
"children":[]
},
{
"id":129,
"parentId":29,
"value":"Child 15",
"children":[]
},
{
"id":136,
"parentId":29,
"value":"Child 16",
"children":[]
},
{
"id":143,
"parentId":29,
"value":"Child 17",
"children":[]
},
{
"id":150,
"parentId":29,
"value":"Child 19",
"children":[
{
"id":157,
"parentId":150,
"value":"Child 18",
"children":[]
}
]
}
]
}
]
Desired Tree:
Root Parent 01
Root Parent 02
Root Parent 03
---Child 01
---Child 02
---Child 03
Root Parent 04
---Child 04
---Child 05
---Child 06
---Child 07
---Child 08
---Child 09
---Child 10
---Child 11
Root Parent 05
---Child 12
---Child 13
---Child 14
---Child 15
---Child 16
---Child 17
---Child 19
------Child 18
1 answers
solution1
1 2018-02-22 22:25:16
While I am a huge fan of trying to attempt this yourself. I have always wondered how to do this as well, and figured it would be a good opportunity for me too.
First I sort the input list looking for items that are for sure a child element and not at all a parent.
Then in the second loop we look for the parent that the child belongs to, and we match them up. You will probably have to refine this process depending on your data. You might also need to loop multiple times, but this should give you enough to make a dent.
var inputArray = [{ "id": 1, "parentId": null, "value": "Root Parent 01", "children": [] }, { "id": 8, "parentId": null, "value": "Root Parent 02", "children": [] }, { "id": 36, "parentId": 15, "value": "Child 01", "children": [] }, { "id": 43, "parentId": 15, "value": "Child 02", "children": [] }, { "id": 50, "parentId": 15, "value": "Child 03", "children": [] }, { "id": 15, "parentId": null, "value": "Root Parent 03", "children": [] }, { "id": 57, "parentId": 22, "value": "Child 04", "children": [] }, { "id": 64, "parentId": 22, "value": "Child 05", "children": [] }, { "id": 71, "parentId": 22, "value": "Child 06", "children": [] }, { "id": 78, "parentId": 22, "value": "Child 07", "children": [] }, { "id": 85, "parentId": 22, "value": "Child 08", "children": [] }, { "id": 92, "parentId": 22, "value": "Child 09", "children": [] }, { "id": 99, "parentId": 22, "value": "Child 10", "children": [] }, { "id": 106, "parentId": 22, "value": "Child 11", "children": [] }, { "id": 22, "parentId": null, "value": "Root Parent 04", "children": [] }, { "id": 113, "parentId": 29, "value": "Child 12", "children": [] }, { "id": 115, "parentId": 29, "value": "Child 13", "children": [] }, { "id": 122, "parentId": 29, "value": "Child 14", "children": [] }, { "id": 129, "parentId": 29, "value": "Child 15", "children": [] }, { "id": 136, "parentId": 29, "value": "Child 16", "children": [] }, { "id": 143, "parentId": 29, "value": "Child 17", "children": [] }, { "id": 157, "parentId": 150, "value": "Child 18", "children": [] }, { "id": 150, "parentId": 29, "value": "Child 19", "children": [] }, { "id": 29, "parentId": null, "value": "Root Parent 05", "children": [] } ] function DataRollUp(input) { var hasParent = []; var output = [] for (i of input) { if (i.parentId) { hasParent.push(i); } else { output.push(i); } } for (i of hasParent) { var parent = output.find(record => record.id == i.parentId) if (parent) { parent.children.push(i); } } console.log(output); return output; } DataRollUp(inputArray)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Loop through Array of Objects within Objects in JavaScript
How can i destucture a javascript object containing other objects within it
How to prepare array of json objects to d3 hierarchical tree structure
How can I loop through this array of objects in javascript?
How to dynamically generate javascript objects within other objects. Can you use a for loop inside an object?
How do I loop through children objects in javascript?
Loop through object and get other objects (javascript)
How to loop through an array of objects, that's within another array of objects - javascript
How can loop through nested array of objects for this in javascript?
Javascript - How to loop through objects within objects that also contain arrays?
Related Tags