Create nested array in Javascript

Question

I'm trying to convert my data from API to my needs. Would like to create a nested array from plain array. I would like to group elements by parentId property, if parentId would not exist I would put it as a root. id value is unique. Like so (raw data):

[
 {id: 1, name: 'sensor'},
 {id: 2, name: 'sensor', parent: 1},
 {id: 3, name: 'sensor', parent: 1},
 {id: 4, name: 'sensor', parent: 3},
 {id: 5, name: 'sensor'},
 {id: 6, name: 'sensor', parent: 5}
]

Converted Data:

 const results = [
 {
 id: 1,
 name: "sensor",
 children: [
 { id: 2, name: "sensor", parent: 1 },
 {
 id: 3,
 name: "sensor",
 parent: 1,
 children: [{ id: 4, name: "sensor", parent: 3 }]
 }
 ]
 },
 { id: 5, name: "sensor", children: [{ id: 6, name: "sensor", parent: 5 }] }
 ];

I found this recursive method but it assumes that the parent property exist for every element in an array. In my example root level element would not have parent property.

function getNestedChildren(arr, parent) {
 var out = []
 for(var i in arr) {
 if(arr[i].parent == parent) {
 var children = getNestedChildren(arr, arr[i].id)
 if(children.length) {
 arr[i].children = children
 }
 out.push(arr[i])
 }
 }
 return out
}

• user47589: Can you show us what you tried? We would be happy to help you get your solution working.
• tadman: You should at least stub in some code here so we don't have to do that for you.
• dillon.harless: couldn't you just modify the one you found to check if the parent exists? so for(var i in arr) { if(arr[i].parent && arr[i].parent == parent)

Answer 1

You could take an approach which uses both relations, one from children to parent and vice versa. At the end take the children of the root node.

This approach works for unsorted data.

var data = [{ id: 1, name: 'sensor' }, { id: 2, name: 'sensor', parent: 1 }, { id: 3, name: 'sensor', parent: 1 }, { id: 4, name: 'sensor', parent: 3 }, { id: 5, name: 'sensor' }, { id: 6, name: 'sensor', parent: 5 }],
 tree = function (data, root) {
 var t = {};
 data.forEach(o => {
 Object.assign(t[o.id] = t[o.id] || {}, o);
 t[o.parent] = t[o.parent] || {};
 t[o.parent].children = t[o.parent].children || [];
 t[o.parent].children.push(t[o.id]);
 });
 return t[root].children;
 }(data, undefined);
 
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Given the limited amount of information (will update if more info is added).

The algorithm would be, given an array of data entries, check if entry has a parent and if that parent exists, in which case we want to add the entry to the array of children of the parent entry otherwise add the entry as a parent.

var dataFromAPI = [
 {id: 1, name: 'sensor'},
 {id: 2, name: 'sensor', parent: 1},
 {id: 3, name: 'sensor', parent: 1},
 {id: 4, name: 'sensor', parent: 3},
 {id: 5, name: 'sensor'},
 {id: 6, name: 'sensor', parent: 5}
];
var transformedData = { };
dataFromAPI.forEach(function(entry){
 if(entry.parent !== undefined && entry.parent in transformedData) {
 transformedData[entry.parent].children.push(entry);
 } else {
 entry["children"] = [];
 transformedData[entry.id] = entry;
 }
});
console.log(transformedData);

Please note:

there are a couple assumptions made within this algorithm/code. It assumes that all parent entries exist before their child entry. It also only accounts for two levels (parent or child), meaning a child cannot act as the parent (otherwise you'd have to store the children as an object and not an array)

Answer 3

use a for loop to go through each item. check if parent property exists (or has value). If not its a child item. Attach it to appropriate parent.

to check if property exists:

var myProp = 'prop';
if (myObj.hasOwnProperty(myProp)) {
 alert("yes, i have that property");
}

Answer 4

try

let h={}, r=[]; // result in r
d.forEach(x=> (h[x.id]=x, x.children=[]) );
d.forEach(x=> x.parent ? h[x.parent].children.push(x) : r.push(x) );

let d = [
 {id: 1, name: 'sensor'},
 {id: 2, name: 'sensor', parent: 1},
 {id: 3, name: 'sensor', parent: 1},
 {id: 4, name: 'sensor', parent: 3},
 {id: 5, name: 'sensor'},
 {id: 6, name: 'sensor', parent: 5}
];
let h = {},r = []; // result in r
d.forEach(x => (h[x.id] = x, x.children = []));
d.forEach(x => x.parent ? h[x.parent].children.push(x) : r.push(x));
console.log(r);

• Praveen Kumar Purushothaman: This is wow... 😇 Can you explain please? I keep getting Maximum call stack size exceeded...
• Kamil Kiełczewski: we use hash h where keys are items id. In first forEach we init hash and and add children array to each item. In second forEach we check taht item has parent - if yes then we take parent from hash and push item to parent children array, if no then this item is root and it go to r array (result/roots). Technical: we use here ternary operator, arrow functions and array forEach

Answer 5

If you want that parent element should not have a parent , than you can manually check and remove fields of an object in an array that has null parent. than you can make a tree... here is an example...

 const arr2 = [
 {id: 1, name: 'gender', parent: null, parent_id: null },
 {id: 2, name: 'material', parent: null, parent_id: null },
 {id: 3, name: 'male', parent: 1, parent_name: "gender" },
 { id: 5, name: 'female', parent: 1, parent_name: "gender" },
 { id: 4, name: 'shoe', parent: 3, parent_id: "male"},
 ]
 let newarr=[];
 for(let i=0 ; i< arr2.length; i++ ){
 if(arr2[i].id){
 if(newarr[i] != {} ){
 newarr[i] = {}
 }
 newarr[i].id = arr2[i].id 
 }
 if( arr2[i].name ){
 newarr[i].name = arr2[i].name 
 }
 if( arr2[i].parent ){
 newarr[i].parent = arr2[i].parent 
 }
 if( arr2[i].parent_id ){
 newarr[i].parent_id = arr2[i].parent_id 
 }
 }
 console.log('newarr', newarr );
 let tree = function (data, root) {
 var obj = {};
 data.forEach(i => {
 Object.assign(obj[i.id] = obj[i.id] || {}, i);
 obj[i.parent] = obj[i.parent] || {};
 obj[i.parent].children = obj[i.parent].children || [];
 obj[i.parent].children.push(obj[i.id]);
 });
 return obj[root].children;
 }(newarr, undefined);
 
 console.log('tree ', tree);