如何将普通数组转换为包含对象的数组？

Question

在我正在处理的 vuejs 项目中，来自 api 的信息以平面数组的形式出现。 我需要编辑此传入数据并将其转换为以下格式。 例如，我需要将 object 的父 id 安排为其父项的 id。

我尝试过这种方式，但树返回为空

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;
},

我该如何解决这个问题，我正在等待你的想法。

来自 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,
}

这就是我想要编辑数据的方式

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

Answer 1

像这样的事情应该这样做

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

Answer 2

您可以尝试直接循环遍历 dataArray 并将子 object 推入parentObj.children ，然后过滤 dataArray 以获得树的所有根节点（树结构）。

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

现在，dataArray 变成了这样：

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}

然后，通过删除没有父对象的对象来过滤 dataArray。

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

结果是一个数组，其中的对象是树结构的根节点。

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