扁平化数据转换树形结构
时间: 2023-08-25 10:07:46 浏览: 77
扁平化数据指的是将具有层级关系的数据展开成一维结构,而树形结构则是将具有层级关系的数据呈现为树状图。因此,将扁平化数据转换成树形结构需要进行一些处理。
以下是一个示例数据:
```json
[
{ "id": 1, "name": "节点1", "parentId": null },
{ "id": 2, "name": "节点2", "parentId": 1 },
{ "id": 3, "name": "节点3", "parentId": 2 },
{ "id": 4, "name": "节点4", "parentId": 2 },
{ "id": 5, "name": "节点5", "parentId": 1 },
{ "id": 6, "name": "节点6", "parentId": 5 }
]
```
其中,每个对象表示一个节点,`id`表示节点的唯一标识,`name`表示节点的名称,`parentId`表示节点的父节点标识。其中,根节点的`parentId`为`null`。
现在要将这个扁平化数据转换成树形结构,可以按照以下步骤进行:
1. 创建一个空的树形结构对象
2. 遍历扁平化数据,将每个节点加入树形结构中
3. 对于每个节点,如果它是根节点,则直接加入树形结构对象的`children`属性中,否则需要将它加入它的父节点的`children`属性中
以下是使用JavaScript实现的代码:
```javascript
function flatToTree(flatData) {
const tree = {};
const map = {};
for (const node of flatData) {
const id = node.id;
const parentId = node.parentId;
if (!map[id]) {
map[id] = { children: [] };
}
map[id].id = id;
map[id].name = node.name;
if (parentId === null) {
tree[id] = map[id];
} else {
if (!map[parentId]) {
map[parentId] = { children: [] };
}
map[parentId].children.push(map[id]);
}
}
return Object.values(tree);
}
```
使用该函数对示例数据进行转换,可以得到如下结果:
```json
[
{
"id": 1,
"name": "节点1",
"children": [
{
"id": 2,
"name": "节点2",
"children": [
{
"id": 3,
"name": "节点3",
"children": []
},
{
"id": 4,
"name": "节点4",
"children": []
}
]
},
{
"id": 5,
"name": "节点5",
"children": [
{
"id": 6,
"name": "节点6",
"children": []
}
]
}
]
}
]
```
可以看到,该函数将扁平化数据成功转换成了树形结构。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)