Creating tree hierarchy from array of objects

Question

First of all, I just want to mention that I really tried to find solution for my problem, but I couldn't find anything that would fit me. Thing is, I have such array:

const arr = [
  {
    leafName: 'name1',
    nodes: [1,2,3,4]
  },
  {
    leafName: 'name2',
    nodes: [1,2,3,4]
  },
  {
    leafName: 'name3',
    nodes: [1,2,4,5]
  },
  {
    leafName: 'name4',
    nodes: [6]
  }
];

and what I expect to have is this:

const expectedTree = {
  name: 'some root name',
  children: [
    {
      name: 1,
      children: [
        {
          name: 2,
          children: [
            {
              name: 3,
              children: [
                {
                  name: 4,
                  children: [
                    {
                      name: 'name1'
                    },
                    {
                      name: 'name2'
                    }
                  ]
                }
              ]
            },
            {
              name: 4,
              children: [
                {
                  name: 5,
                  children: [
                    {
                      name: 'name3'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      name: 6,
      children: [
        {
          name: 'name4'
        }
      ]
    }
  ]
};

as you can see leafName should be last node in tree branch. Also if there is partial match from root node to some other node, new child should be added from node which matches last. For example let's take arr[1].nodes and arr[2].nodes first two members match, so that means that they should be in same branch just 4 and 5 from arr[2].nodes split to separate branch(as children for { name: 2, children: [should go here] }). I really hope you get the idea and I also hope that someone will help me with this. Because I am stuck with this for two days now and I couldn't figure out 'clean' solution for this myself.

Any comments would be very appreciated. ;)

Nina Scholz · Accepted Answer · 2018-08-20 21:28:02Z

2

You could loop the array and the nodes and reduce nodes by looking at same name for each level. If a node does not exist, create a new one and return the children of the node.

var array = [{ leafName: 'name1', nodes: [1, 2, 3, 4] }, { leafName: 'name2', nodes: [1, 2, 3, 4] }, { leafName: 'name3', nodes: [1, 2, 4, 5] }, { leafName: 'name4', nodes: [6] }],
    result = [];

array.forEach(({ leafName, nodes }) => {
    nodes
        .reduce((level, name) => {
            var temp = level.find(o => o.name === name);
            if (!temp) {
                level.push(temp = { name });
            }
            return temp.children = temp.children || [];
        }, result)
        .push({ name: leafName });
});

console.log(result);

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

answered Aug 20, 2018 at 21:28

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Collectives™ on Stack Overflow

Creating tree hierarchy from array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related