Make tree from array And change representation of parent field to object instead of ID

Question

I stacked with trivial question but can't find the solution. Any help will be appreciated.

I have an array of obects

[
    {
        id: 1,
        title: 'home',
        parent: null,
    },
    {
        id: 2,
        title: 'about',
        parent: null,
    },
    {
        id: 3,
        title: 'team',
        parent: 2,
    },
    {
        id: 4,
        title: 'company',
        parent: 2,
    },
    ,
    {
        id: 5,
        title: 'department',
        parent: 4,
    },
];

To make Tree I use this function: Solution from here

const treeify = (arr) => {
    const tree = [];
    const lookup = {};
    arr.forEach((o) => {
        lookup[o.id] = o;
        lookup[o.id].children = [];
    });
    arr.forEach((o) => {
        if (o.parent !== null) {
            lookup[o.parent].children.push(o);
        } else {
            tree.push(o);
        }
    });
    return tree;
};

And finally I have the tree like so:

[
  {
    "id": 1,
    "title": "home",
    "parent": null,
    "children": []
  },
  {
    "id": 2,
    "title": "about",
    "parent": null,
    "children": [
      {
        "id": 3,
        "title": "team",
        "parent": 2,
        "children": []
      },
      {
        "id": 4,
        "title": "company",
        "parent": 2,
        "children": [
          {
            "id": 5,
            "title": "department",
            "parent": 4,
            "children": []
          }
        ]
      }
    ]
  }
]

The question is: How replace parent ID with object itself?

I want the result like:

            "id": 4,
            "title": "company",
            "parent":  { // <-- how to change just id to object here
                        "id": 2,
                        "title": "about",
                        "parent": null,
                       },
            "children": []

Thank you for help!

Nina Scholz · Answer 1 · 2020-11-04T14:20:21.330

1

You could take a single loop approach with a reference for each found node.

const
    data = [{ id: 1, title: 'home', parent: null, }, { id: 2, title: 'about', parent: null }, { id: 3, title: 'team', parent: 2 }, { id: 4, title: 'company', parent: 2 }, { id: 5, title: 'department', parent: 4 }],
    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]);
            if (t[o.id].parent !== null) t[o.id].parent = t[t[o.id].parent];
        });
        return t[root].children;
    }(data, null);

console.log(tree);

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

edited Nov 04 '20 at 14:20

answered Nov 04 '20 at 13:05

Nina Scholz

376,160
25
347
392

Thank you for so quick answer! Im sorry, but parents still represents by id only. What I missed? – Vladimir Vs Nov 04 '20 at 13:26
do you like to add the parent's node at `parent`? please see edit. – Nina Scholz Nov 04 '20 at 14:16
I need instead "parent": 3 have whole object whit id = 3 i.e. parent: {id: 3, title: 'some title', children: []}. Kind of. Thank you for help! – Vladimir Vs Nov 04 '20 at 16:26
it is. don't be fooled by the systems reference id. – Nina Scholz Nov 04 '20 at 16:39
So do you think I shell use recursion then? – Vladimir Vs Nov 04 '20 at 16:48
do you get the wanted result with the above code? the code does not use recursions. – Nina Scholz Nov 04 '20 at 16:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224133/discussion-between-vladimir-vs-and-nina-scholz). – Vladimir Vs Nov 05 '20 at 06:24

score 0 · Answer 2 · answered Nov 04 '20 at 13:10

You could use reduce method to create recursive function and pass parentId and parent object to the nested recursive calls. And if there is parent object you assign it to current element.

const data = [{"id":1,"title":"home","parent":null},{"id":2,"title":"about","parent":null},{"id":3,"title":"team","parent":2},{"id":4,"title":"company","parent":2},{"id":5,"title":"department","parent":4}]

const treeify = (data, pid = null, parent = null) => {
  return data.reduce((r, e) => {
    if (e.parent === pid) {
      const o = { ...e }
      if (parent) o.parent = parent;

      const children = treeify(data, e.id, e);
      if (children.length) o.children = children;

      r.push(o)
    }

    return r;
  }, [])
}

const result = treeify(data);
console.log(JSON.stringify(result, 0, 4))

Thank you for your answer! My data to work with suppose to be huge, so I'm trying to avoid recursion. — Vladimir Vs, Nov 04 '20 at 13:30

Make tree from array And change representation of parent field to object instead of ID

2 Answers2

Linked