en mi proyecto vuejs en el que estoy trabajando, la información de la API viene en forma de matriz plana. Necesito editar estos datos entrantes y convertirlos al siguiente formato. Por ejemplo, necesito organizar la identificación principal de un objeto para que sea la identificación de su elemento principal.
Lo intenté de esta manera pero el árbol regresa como vacío.
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; },Como puedo solucionar este problema, espero sus ideas.
datos de 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, }así es como quiero editar datos
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: [], }, ], }, ], }, ],Puede intentar recorrer directamente el dataArray e insertar el objeto secundario en parentObj.children , luego filtrar el dataArray para obtener todos los nodos raíz de los árboles (estructuras de árbol).
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 } } }Por ahora, dataArray se convierte en algo como esto:
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}Luego, filtre dataArray eliminando objetos que no tienen padre.
let newData = dataArr.filter((obj) => !obj.parentId);El resultado es una matriz con objetos que son nodos raíz de estructuras de árbol.
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