后端处理带有父子关系扁平数组转为JSON树对象

前言

需求:在业务开发中,回存在许多父子级别的数据结构。如公司组织结构,员工角色等类似结构

1
2
3
4
5
6
xx公司
硬件部门
软件部门
前端开发
后端开发
....

数据库设计

出现了上面的的结构,那怎么将上面数据结构保存在数据库呢?会是下面这种吗,表中有一个parent_id指向父节点id,如果parent_id为0,代表这就是一个根节点。那要怎么将这种二维扁平数组变成树结构。

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
[
{
router: '2353163411184107728784',
name: '日常办公',
icon: 'dashboard',
parent_id: '0',
create_user: 1,
scopedSlots: { icon: 'icon_sel' },
meta: { page: [Object] }
},
{
router: '4ad9163411202135173173',
name: '请假',
icon: 'form',
parent_id: '2353163411184107728784',
create_user: 1,
scopedSlots: { icon: 'icon_sel' },
meta: { page: [Object] }
},
{
router: '7b7f163411205109476557',
name: '财务报销',
icon: 'form',
parent_id: '2353163411184107728784',
create_user: 1,
scopedSlots: { icon: 'icon_sel' },
meta: { page: [Object] }
},
{
router: '86aa163411207435681381',
name: '调休申请',
icon: 'form',
parent_id: '2353163411184107728784',
create_user: 1,
scopedSlots: { icon: 'icon_sel' },
meta: { page: [Object] }
}
]

转换后的树结构是怎么样的呢,转换完成后就是下面这样的形式

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
{
"data": [
{
"router": "2353163411184107728784",
"name": "日常办公",
"icon": "dashboard",
"parent_id": "0",
"create_user": 1,
"scopedSlots": {
"icon": "icon_sel"
},
"meta": {
"page": {
"pid": "2",
"state": "demo_1"
}
},
"children": [
{
"router": "4ad9163411202135173173",
"name": "我要请假",
"icon": "form",
"parent_id": "2353163411184107728784",
"create_user": 1,
"scopedSlots": {
"icon": "icon_sel"
},
"meta": {
"page": {
"pid": "2",
"state": "demo_1"
}
}
},
{
"router": "7b7f163411205109476557",
"name": "财务报销",
"icon": "form",
"parent_id": "2353163411184107728784",
"create_user": 1,
"scopedSlots": {
"icon": "icon_sel"
},
"meta": {
"page": {
"pid": "2",
"state": "demo_1"
}
}
},
{
"router": "86aa163411207435681381",
"name": "调休申请",
"icon": "form",
"parent_id": "2353163411184107728784",
"create_user": 1,
"scopedSlots": {
"icon": "icon_sel"
},
"meta": {
"page": {
"pid": "2",
"state": "demo_1"
}
}
}
]
}
]
}

转换函数编写

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


// 二维扁平数组数据,转树型
function convert(list){
const result = [];
const map = list.reduce((pre, cur) => {
pre[cur.router] = cur;
return pre;
}, {});
for(let item of list){
if(item.parent_id === 0){
result.push(item);
continue;
}
if(item.parent_id in map){
const parent = map[item.parent_id];
parent.children = parent.children || [];
parent.children.push(item);
}
}
return result;
}
let obj = convert(flatArr);