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](https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript) — Muhammet Can TONBUL, Nov 08 '18 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, Nov 08 '18 at 14:14

score 1 · Accepted Answer · answered Nov 08 '18 at 14:48

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; }

and how fast is it? but anyway, the approach is not optimised for speed, but for better reading. — Nina Scholz, Dec 05 '19 at 12:40

Creating a hierarchical tree in javascript

1 Answers1