Creating a hierarchical tree in javascript

Question

I have a flat array like this containing data objects with id and values. Every id will be unique

var data = [{
        id: 1,
        value: 'as',
        parent: 2
    }, {
        id: 2,
        value: 'sasa',
        parent: 3
    }, {
        id: 3,
        value: 'sasa',
        parent: 
    }]

How can I create a hierarchical tree like "object" in JavaScript not an Array because I further want to access the object's elements like 3.2.value

{
        id: 3,
        value: 'sasa',
        parent: '',
        2: {
            id: 2,
            value: 'sasa',
            parent: 3,
            1: {
                id: 1,
                value: 'as',
                parent: 2
            }
        }
    }

Possible duplicate of Build tree array from flat array in javascript — Muhammet Can TONBUL
– Muhammet Can TONBUL, Commented Nov 8, 2018 at 14:06
That is different I already saw that answer but that answer seems to deal with arrays I want the object implementation — Tanuj Nagpal
– Tanuj Nagpal, Commented Nov 8, 2018 at 14:14

Nina Scholz · Accepted Answer · 2018-11-08 14:48:59Z

1

You could take an iterative approach by using an object for collencting an create an object for id and parent at the same time to keep their relation.

At the end return the property which has the root as parent.

The result is lightly different, because you want to address the nodes by using their id as accessor.

var data = [{ id: 1, value: 'as', parent: 2 }, { id: 2, value: 'sasa', parent: 3 }, { id: 3, value: 'sasa', parent: '' }],
    tree = function (data, root) {
        return data.reduce(function (r, o) {
            Object.assign(r[o.id] = r[o.id] || {}, o);
            r[o.parent] = r[o.parent] || {};
            r[o.parent][o.id] = r[o.id];
            return r;
        }, Object.create(null))[root];
    }(data, '');

console.log(tree);

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

answered Nov 8, 2018 at 14:48

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

Nina Scholz Over a year ago

and how fast is it? but anyway, the approach is not optimised for speed, but for better reading.

Collectives™ on Stack Overflow

Creating a hierarchical tree in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related