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 · Accepted Answer · 2020-11-04 14:20:21Z

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 4, 2020 at 14:20

answered Nov 4, 2020 at 13:05

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

7 Comments

Vladimir Vs Over a year ago

Thank you for so quick answer! Im sorry, but parents still represents by id only. What I missed?

Nina Scholz Over a year ago

do you like to add the parent's node at parent? please see edit.

Vladimir Vs Over a year ago

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!

Nina Scholz Over a year ago

it is. don't be fooled by the systems reference id.

Vladimir Vs Over a year ago

So do you think I shell use recursion then?

|

Nenad Vracar · Accepted Answer · 2020-11-04 13:10:48Z

0

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))

answered Nov 4, 2020 at 13:10

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

1 Comment

Vladimir Vs Over a year ago

Thank you for your answer! My data to work with suppose to be huge, so I'm trying to avoid recursion.

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related