How can I convert a plain array into an array with objects?

Question

in my vuejs project I'm working on, the information from the api comes in the form of a flat array. I need to edit this incoming data and convert it to the following format. For example, I need to arrange the parent id of an object to be the id of its parent item.

i tried this way but the tree is returning as empty

convertToTree(data) {
  const tree = [];
  const mapped = {};
  for (let i = 0; i < data.length; i += 1) {
    mapped[data[i].id] = data[i];
    mapped[data[i].id].children = [];
  }
  for (let i = 0; i < data.length; i += 1) {
    if (mapped[data[i].parentId]) {
      mapped[data[i].parentId].children.push(mapped[data[i]]);
    } else {
      tree.push(mapped[data[i]]);
    }
  }

  return tree;
},

How can I solve this problem, I am waiting for your ideas.

data from api

{
  "id": 1,
  "parentId": 0,
}, {
  "id": 2,
  "parentId": 0,
}, {
  "id": 3,
  "parentId": 0,
}, {
  "id": 4,
  "parentId": 3,
}, {
  "id": 5,
  "parentId": 3,
}, {
  "id": 6,
  "parentId": 4,
}, {
  "id": 7,
  "parentId": 4,
}, {
  "id": 8,
  "parentId": 5,
}, {
  "id": 9,
  "parentId": 5,
}, {
  "id": 10,
  "parentId": 0,
}

this is how i want to edit data

items: [{
    id: 1,
    parentId: 0,
    children: [{
      id: 10,
      parentId: 1,
    }, ],
    id: 2,
    parentId: 0,
    children: [],
    id: 3,
    parentId: 0,
    children: [{
        id: 4,
        parentId: 3,
        children: [{
            id: 6,
            parentId: 4,
            children: [],
          },
          {
            id: 7,
            parentId: 4,
            children: [],
          },
          {
            id: 8,
            parentId: 4,
            children: [],
          },
        ],
      },
      {
        id: 5,
        parentId: 3,
        children: [{
            id: 9,
            parentId: 5,
            children: [],
          },
          {
            id: 10,
            parentId: 5,
            children: [],
          },
          {
            id: 11,
            parentId: 5,
            children: [],
          },
        ],
      },
    ],
  }, ],

Please visit help center, take tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet — mplungjan
– mplungjan, Commented Jan 29, 2022 at 13:58
What did you try? That there's a tree suggests that nodes (objects with children) can be formed with recursive function call. — Estus Flask
– Estus Flask, Commented Jan 29, 2022 at 14:05
Your desired output is invalid as it contains multiple id/parentId/children properties in the same object/at the same level. — 404
– 404, Commented Jan 29, 2022 at 14:34

MossHawk · Accepted Answer · 2022-01-29 16:07:09Z

You can try to directly loop through the dataArray and push the child object into parentObj.children, then filter the dataArray to get all the root nodes of trees (Tree structures).

for (obj of dataArr) {
    if (obj.parentId) {
        let parent = dataArr.find((i) => i.id === obj.parentId);
        if (parent) {
            parent.children = [...parent.children || [], obj]
            // ↑ this creates an array if parent.children is undefined, avoiding error
        }
    }
}

By now, the dataArray becomes something like this:

0: {id: 1, parentId: 0}
1: {id: 2, parentId: 0}
2: {id: 3, parentId: 0, children: Array(2)}
3: {id: 4, parentId: 3, children: Array(2)}
4: {id: 5, parentId: 3, children: Array(2)}
5: {id: 6, parentId: 4}
6: {id: 7, parentId: 4}
7: {id: 8, parentId: 5}
8: {id: 9, parentId: 5}
9: {id: 10, parentId: 0}

Then, filter the dataArray by removing objects that got no parent.

let newData = dataArr.filter((obj) => !obj.parentId);

The result is an array with objects that are root nodes of tree structures.

0: {id: 1, parentId: 0}
1: {id: 2, parentId: 0}
2: {id: 3, parentId: 0, children: Array(2)}
3: {id: 10, parentId: 0}

newData[2]:

2:
children: Array(2)
    0:
    children: Array(2)
        0: {id: 6, parentId: 4}
        1: {id: 7, parentId: 4}
    id: 4
    parentId: 3
    1:
    children: Array(2)
        0: {id: 8, parentId: 5}
        1: {id: 9, parentId: 5}
    id: 5
    parentId: 3
id: 3
parentId: 0

Collectives™ on Stack Overflow

How can I convert a plain array into an array with 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