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: [],
          },
        ],
      },
    ],
  }, ],

CodePudding user response：

Something like this should do it

const data = dataFromYourApi;

const objArray = data.reduce((prevValue, currentValue) => {
  const obj = {"id": currentValue.id, "parentId": currentValue.parentId, "children": []};
  
  // if it has parent 0 add to top
  if (!currentValue.parentId) {
    prevValue.push(obj);
  } else {
    const parent = prevValue.find(o => o.id === currentValue.parentId);

    parent.children.push(obj);
  }
}, []);

CodePudding user response：

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