How can I create nested tree in array object

Question

Following the array object data: Using Javascript data structures, how could I iterate over array object into children array's, every time when I get new children using its ID and parent ID.

Trying to find Parent Id and child nested root nodes using javascript but I couldn't able find, how to iterate array object into its children array. can anyone help me out.

var data = [ 
  { id: 7, label: 'a', parentId: 2, childerns: [] },
  { id: 7, label: 'm', parentId: 2, childerns: [] },
  { id: 2, label: 'b', parentId: 5, childerns: [] },
  { id: 5, label: 'c', parentId: 20, childerns: [] },
  { id: 20, label: 'x', parentId: null, childerns: [] },
  { id: 8, label: 'd', parentId: 7, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] } ];```

and looking for the following nested tree pattern:

```var data = [
    {
        id: 20,
        label: 'x',
        parentId: null,
        childerns: [
            {
                id: 5,
                label: 'c',
                parentId: 20,
                childerns: [{
                    id: 2,
                    label: 'b',
                    parentId: 5,
                    childerns: [
                        {
                            id: 7, 
                            label: 'm',
                            parentId: 2,
                            childerns: [] 
                        },
                        {
                            id: 7,
                            label: 'a',
                            parentId: 2,
                            childerns: [{
                                id: 8,
                                label: 'd',
                                parentId: 7,
                                childerns: [
                                    {
                                        id: 9,
                                        label: 'n',
                                        parentId: 8,
                                        childerns: []
                                    },
                                    {
                                        id: 9,
                                        label: 'n',
                                        parentId: 8,
                                        childerns: []
                                    }
                                ]
                            }]
                        }]
                }]
            }]
    }];```

Nick · Accepted Answer · 2019-11-21 01:26:11Z

3

I like the following pattern. First, you use an object to track where in the original array each element lives. Then, you iterate through the original array, adding a reference to the current element to its parent array. If parentId is null, add the element to roots. After all this, your roots array will contain the full tree.

const arr = [
  { id: 7, label: 'm', parentId: 2, childerns: [] },
  { id: 2, label: 'b', parentId: 5, childerns: [] },
  { id: 5, label: 'c', parentId: 20, childerns: [] },
  { id: 20, label: 'x', parentId: null, childerns: [] },
  { id: 8, label: 'd', parentId: 7, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] },
  { id: 10, label: 'n', parentId: 8, childerns: [] } 
];

// Map element ID to arr index
const arrMap = arr.reduce((acc, el, i) => {
  acc[el.id] = i;
  return acc;
}, {});

const roots = [];

// Push each element to parent's children array
arr.forEach(el => {
  if (el.parentId === null) {
    roots.push(el);
  } else {
    arr[arrMap[el.parentId]].childerns.push(el);
  }
});

console.log(roots);

answered Nov 21, 2019 at 1:26

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Harish Over a year ago

You're missing duplicate array object which was retrun twice as same. like { id: 7, label: 'a', parentId: 2, childerns: [] }, { id: 7, label: 'm', parentId: 2, childerns: [] },

Nick Over a year ago

I assumed that was a mistake. What should happen when there's a duplicate array object?

Harish Over a year ago

Everything should be taken and create a nested array.

Nick Over a year ago

So if there are two parents with the same ID, where do the children go? In your example tree, why is ID 8 only under one of the ID 7 nodes and not under the other?

Harish Over a year ago

whichever duplicate comes last, we can assign one to it.

StackSlave · Accepted Answer · 2019-11-21 02:00:37Z

1

If you are looking for a pattern where the children can expand almost infinitely, you should use a class or a constructor, so you can just pass another instance within, as demonstrated in the following UnitInstance.addChild method.

 /* constructor */
function Unit(id, label, children){
  this.id = id; this.label = label; this.parentId = null; this.children = [];
  var t = this;
  this.addChild = function(unitInstance){
    unitInstance.parentId = this.id; this.children.push(unitInstance);
    return this;
  }
  if(children){
    children.forEach(function(o){
      t.addChild(o);
    });
  }
  this.getData = function(){
    var c = [];
    this.children.forEach(function(o){
      c.push(o.getData());
    });
    return {id:t.id, label:t.label, parentId:t.parentId, children:c};
  }
}
var x = new Unit(20, 'x'), c = new Unit(5, 'c'), b = new Unit(2, 'b'), m = new Unit(7, 'm'); a = new Unit(7, 'a'), d = new Unit(8, 'd'), n = new Unit(9, 'n');
x.addChild(c.addChild(b.addChild(m.addChild(a.addChild(d.addChild(n).addChild(n))))));
var data = [x.getData()];
console.log(data);

edited Nov 21, 2019 at 2:00

answered Nov 21, 2019 at 1:53

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

3 Comments

Harish Over a year ago

I can't hard code to nest every time when I receive new data

StackSlave Over a year ago

Every time you receive new data, create a new Unit, which you can just push UnitInstance.getData() onto your data Array.

StackSlave Over a year ago

Not if you do it on an Event, then it's dynamic.

Collectives™ on Stack Overflow

How can I create nested tree in array object

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related