扁平的数据转树状数据

90 阅读 0 评论 60 点赞

我是靠谱客的博主害羞大白，这篇文章主要介绍扁平的数据转树状数据，现在分享给大家，希望可以做个参考。

扁平的数据转树状数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let subData = [
{name: "1", id: "1"},
{name: "1-1", id: "1-1"},
{name: "1-1-1", id: "1-1-1"},
{name: "1-2", id: "1-2"},
{name: "1-2-1", id: "1-2-1"},
{name: "1-2-2", id: "1-2-2"},
{name: "2", id: "2"},
{name: "2-1", id: "2-1"},
{name: "2-2", id: "2-2"},
{name: "3", id: "3"},
{name: "3-1", id: "3-1"},
{name: "3-2", id: "3-2"},
{name: "3-1-1", id: "3-1-1"},
{name: "4", id: "4"},
{name: "10", id: "10"},
{name: "10-1", id: "10-1"},
{name: "10-1-10", id: "10-1-10"}
]

给定一个扁平的数据转成树状数据，以id区分层级

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function getData(arr) {
// 顶层数据
let parentData = arr.filter(item => {
return !item.id.includes("-");
})
// 所有子数据
let childrenData = arr.filter(item => {
let atr = item.id.includes("-")
if (atr) {
let atr2 = item.id.split("-");
atr2.pop();
let atr3 = atr2.join("-");
// 所有的子数据添加parentID字段，等于父级的id
item.parentID = atr3；
}
return atr;
})
let translator = (parentData, childrenData ) => {
parentData.forEach((parent) => {
childrenData.forEach((current, index) => {
if (current.parentID === parent.id) {
let temp = JSON.parse(JSON.stringify(children))
temp.splice(index, 1)
translator([current], temp);
typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
}
}
)
}
)
}
translator(parentData, childrenData)
return parents
}
// 调用方法
getData(subData)

最后输出结果：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
[
{
"name": "1",
"id": "1",
"children": [
{
"name": "1-1",
"id": "1-1",
"parentID": "1",
"children": [
{
"name": "1-1-1",
"id": "1-1-1",
"parentID": "1-1"
}
]
},
{
"name": "1-2",
"id": "1-2",
"parentID": "1",
"children": [
{
"name": "1-2-1",
"id": "1-2-1",
"parentID": "1-2"
},
{
"name": "1-2-2",
"id": "1-2-2",
"parentID": "1-2"
}
]
}
]
},
{
"name": "2",
"id": "2",
"children": [{
"name": "2-1",
"id": "2-1",
"parentID": "2"
},
{
"name": "2-2",
"id": "2-2",
"parentID": "2"
}
]
},
{
"name": "3",
"id": "3",
"children": [
{
"name": "3-1",
"id": "3-1",
"parentID": "3",
"children": [
{
"name": "3-1-1",
"id": "3-1-1",
"parentID": "3-1"
}
]
},
{
"name": "3-2",
"id": "3-2",
"parentID": "3"
}
]
},
{
"name": "4",
"id": "4"
},
{
"name": "10",
"id": "10",
"children": [
{
"name": "10-1",
"id": "10-1",
"parentID": "10",
"children": [
{
"name": "10-1-10",
"id": "10-1 -10",
"parentID": "10-1"
}
]
}
]
}
]