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