后端返回单级数据，前端如何将其修改为嵌套的数据，tree

当你从后端获取到的是单级数据，例如一个数组，其中每个元素代表一条记录，但你需要在前端显示为树形结构（通常用于目录、层级关系展示），你可以采取以下步骤：

1. **解析数据**：
- 首先，遍历原始数据，根据某些字段（如ID、parent_id等）判断每个记录是否属于某个父节点，如果不存在，则设置其为根节点。

2. **创建树形结构**：
- 使用递归方法构建树状结构。对于每一个节点，创建一个新的对象，包含原始数据和子节点列表。然后将当前节点添加到相应父节点的子节点列表中。

3. **扁平化转换**：
- 如果需要展开树形结构以便一次性渲染，可以将整个树转换成更易于处理的一维数组。这一步通常涉及到深度优先搜索（DFS）或广度优先搜索（BFS）算法。

4. **渲染组件**：
- 将处理过的数据传递给前端模板或React、Vue等框架的组件，这些库通常提供内置的树形组件或API，方便地展示数据。

举个例子，如果你有如下单级数据：

[
    {
      "id": 1,
      "name": "顶级",
      "children": []
    },
    {
      "id": 2,
      "name": "二级1",
      "parentId": 1
    },
    {
      "id": 3,
      "name": "二级2",
      "parentId": 1
    },
    {
      "id": 4,
      "name": "三级1",
      "parentId": 2
    }
]

你可以在前端用JavaScript重构为：

const data = [
  { id: 1, name: '顶级', children: [ { id: 2, name: '二级1', children: [{ id: 4, name: '三级1' }] }, { id: 3, name: '二级2', children: [] } ] },
];