JS 将扁平后的数据 恢复成 树结构
用 JS 将扁平后的数据 恢复成 树结构
已扁平化后的 省市区 为例子：
扁平后的数据
plain-area.json
[
{
"id": 4744,
"name": "中国",
"pid": 0
},
{
"id": 1,
"name": "北京",
"pid": 4744
},
{
"id": 72,
"name": "朝阳区",
"pid": 1
},
{
"id": 55653,
"name": "八里庄街道",
"pid": 72
},
{
"id": 4139,
"name": "北苑",
"pid": 72
},
{
"id": 55654,
"name": "常营地区",
"pid": 72
},
{
"id": 2901,
"name": "昌平区",
"pid": 1
},
{
"id": 55548,
"name": "百善镇",
"pid": 2901
},
{
"id": 55549,
"name": "北七家镇",
"pid": 2901
},
{
"id": 55550,
"name": "城北街道",
"pid": 2901
},
{
"id": 2806,
"name": "石景山区",
"pid": 1
},
{
"id": 54707,
"name": "八宝山街道",
"pid": 2806
},
{
"id": 4188,
"name": "八大处科技园区",
"pid": 2806
},
{
"id": 54708,
"name": "八角街道",
"pid": 2806
},
{
"id": 4,
"name": "重庆",
"pid": 4744
},
{
"id": 48131,
"name": "璧山区",
"pid": 4
},
{
"id": 58515,
"name": "璧城街道",
"pid": 48131
},
{
"id": 58516,
"name": "璧泉街道",
"pid": 48131
},
{
"id": 48192,
"name": "八塘镇",
"pid": 48131
},
{
"id": 48202,
"name": "巴南区",
"pid": 4
},
{
"id": 52490,
"name": "城区",
"pid": 48202
},
{
"id": 48372,
"name": "石龙镇",
"pid": 48202
},
{
"id": 48371,
"name": "石滩镇",
"pid": 48202
},
{
"id": 48203,
"name": "北碚区",
"pid": 4
},
{
"id": 54800,
"name": "北温泉街道",
"pid": 48203
},
{
"id": 54799,
"name": "朝阳街道",
"pid": 48203
},
{
"id": 48246,
"name": "澄江镇",
"pid": 48203
},
{
"id": 16,
"name": "福建",
"pid": 4744
},
{
"id": 1303,
"name": "福州市",
"pid": 16
},
{
"id": 1305,
"name": "长乐区",
"pid": 1303
},
{
"id": 53259,
"name": "城区",
"pid": 1305
},
{
"id": 48927,
"name": "古槐镇",
"pid": 1305
},
{
"id": 59088,
"name": "航城街道",
"pid": 1305
},
{
"id": 48713,
"name": "仓山区",
"pid": 1303
},
{
"id": 48747,
"name": "城门镇",
"pid": 48713
},
{
"id": 51478,
"name": "城区",
"pid": 48713
},
{
"id": 59132,
"name": "仓前街道",
"pid": 48713
},
{
"id": 48715,
"name": "福清市",
"pid": 1303
},
{
"id": 48902,
"name": "城头镇",
"pid": 48715
},
{
"id": 51480,
"name": "城区",
"pid": 48715
},
{
"id": 48910,
"name": "东瀚镇",
"pid": 48715
},
{
"id": 1362,
"name": "龙岩市",
"pid": 16
},
{
"id": 1365,
"name": "长汀县",
"pid": 1362
},
{
"id": 44995,
"name": "城区",
"pid": 1365
},
{
"id": 45007,
"name": "策武镇",
"pid": 1365
},
{
"id": 44997,
"name": "大同镇",
"pid": 1365
},
{
"id": 1369,
"name": "连城县",
"pid": 1362
},
{
"id": 45128,
"name": "北团镇",
"pid": 1369
},
{
"id": 45126,
"name": "城区",
"pid": 1369
},
{
"id": 45137,
"name": "隔川乡",
"pid": 1369
},
{
"id": 1368,
"name": "上杭县",
"pid": 1362
},
{
"id": 45065,
"name": "白砂镇",
"pid": 1368
},
{
"id": 45078,
"name": "步云乡",
"pid": 1368
},
{
"id": 45075,
"name": "茶地镇",
"pid": 1368
},
{
"id": 1370,
"name": "宁德市",
"pid": 16
},
{
"id": 1377,
"name": "屏南县",
"pid": 1370
},
{
"id": 46200,
"name": "屏城乡",
"pid": 1377
},
{
"id": 46199,
"name": "长桥镇",
"pid": 1377
},
{
"id": 46195,
"name": "城区",
"pid": 1377
},
{
"id": 1373,
"name": "福鼎市",
"pid": 1370
},
{
"id": 46275,
"name": "白琳镇",
"pid": 1373
},
{
"id": 46274,
"name": "磻溪镇",
"pid": 1373
},
{
"id": 51502,
"name": "城区",
"pid": 1373
},
{
"id": 1372,
"name": "福安市",
"pid": 1370
},
{
"id": 46258,
"name": "坂中畲族乡",
"pid": 1372
},
{
"id": 55509,
"name": "城北街道",
"pid": 1372
},
{
"id": 55508,
"name": "城南街道",
"pid": 1372
}
]
通过递归生成树
const plainArea = require('./plain-area.json')
/**
* 递归找 children
* @param {[]} plain - 原始扁平化后的树数据
* @param {number} pid - 父级id (parent id)
* @return {*[]}
*/
function findChildren(plain = [], pid) {
const children = plain.filter(area => area.pid === pid)
if (!children.length) {
return []
}
children.forEach(area => {
area.children = findChildren(plain, area.id)
})
return children
}
function main() {
const tree = findChildren(plainArea, 0)
console.log('树已生成', tree)
}
main()
生成的 树结构体数据
[
{
"id": 4744,
"name": "中国",
"pid": 0,
"children": [
{
"id": 1,
"name": "北京",
"pid": 4744,
"children": [
{
"id": 72,
"name": "朝阳区",
"pid": 1,
"children": [
{
"id": 55653,
"name": "八里庄街道",
"pid": 72,
"children": []
},
{
"id": 4139,
"name": "北苑",
"pid": 72,
"children": []
},
{
"id": 55654,
"name": "常营地区",
"pid": 72,
"children": []
}
]
},
{
"id": 2901,
"name": "昌平区",
"pid": 1,
"children": [
{
"id": 55548,
"name": "百善镇",
"pid": 2901,
"children": []
},
{
"id": 55549,
"name": "北七家镇",
"pid": 2901,
"children": []
},
{
"id": 55550,
"name": "城北街道",
"pid": 2901,
"children": []
}
]
},
{
"id": 2806,
"name": "石景山区",
"pid": 1,
"children": [
{
"id": 54707,
"name": "八宝山街道",
"pid": 2806,
"children": []
},
{
"id": 4188,
"name": "八大处科技园区",
"pid": 2806,
"children": []
},
{
"id": 54708,
"name": "八角街道",
"pid": 2806,
"children": []
}
]
}
]
},
{
"id": 4,
"name": "重庆",
"pid": 4744,
"children": [
{
"id": 48131,
"name": "璧山区",
"pid": 4,
"children": [
{
"id": 58515,
"name": "璧城街道",
"pid": 48131,
"children": []
},
{
"id": 58516,
"name": "璧泉街道",
"pid": 48131,
"children": []
},
{
"id": 48192,
"name": "八塘镇",
"pid": 48131,
"children": []
}
]
},
{
"id": 48202,
"name": "巴南区",
"pid": 4,
"children": [
{
"id": 52490,
"name": "城区",
"pid": 48202,
"children": []
},
{
"id": 48372,
"name": "石龙镇",
"pid": 48202,
"children": []
},
{
"id": 48371,
"name": "石滩镇",
"pid": 48202,
"children": []
}
]
},
{
"id": 48203,
"name": "北碚区",
"pid": 4,
"children": [
{
"id": 54800,
"name": "北温泉街道",
"pid": 48203,
"children": []
},
{
"id": 54799,
"name": "朝阳街道",
"pid": 48203,
"children": []
},
{
"id": 48246,
"name": "澄江镇",
"pid": 48203,
"children": []
}
]
}
]
},
{
"id": 16,
"name": "福建",
"pid": 4744,
"children": [
{
"id": 1303,
"name": "福州市",
"pid": 16,
"children": [
{
"id": 1305,
"name": "长乐区",
"pid": 1303,
"children": [
{
"id": 53259,
"name": "城区",
"pid": 1305,
"children": []
},
{
"id": 48927,
"name": "古槐镇",
"pid": 1305,
"children": []
},
{
"id": 59088,
"name": "航城街道",
"pid": 1305,
"children": []
}
]
},
{
"id": 48713,
"name": "仓山区",
"pid": 1303,
"children": [
{
"id": 48747,
"name": "城门镇",
"pid": 48713,
"children": []
},
{
"id": 51478,
"name": "城区",
"pid": 48713,
"children": []
},
{
"id": 59132,
"name": "仓前街道",
"pid": 48713,
"children": []
}
]
},
{
"id": 48715,
"name": "福清市",
"pid": 1303,
"children": [
{
"id": 48902,
"name": "城头镇",
"pid": 48715,
"children": []
},
{
"id": 51480,
"name": "城区",
"pid": 48715,
"children": []
},
{
"id": 48910,
"name": "东瀚镇",
"pid": 48715,
"children": []
}
]
}
]
},
{
"id": 1362,
"name": "龙岩市",
"pid": 16,
"children": [
{
"id": 1365,
"name": "长汀县",
"pid": 1362,
"children": [
{
"id": 44995,
"name": "城区",
"pid": 1365,
"children": []
},
{
"id": 45007,
"name": "策武镇",
"pid": 1365,
"children": []
},
{
"id": 44997,
"name": "大同镇",
"pid": 1365,
"children": []
}
]
},
{
"id": 1369,
"name": "连城县",
"pid": 1362,
"children": [
{
"id": 45128,
"name": "北团镇",
"pid": 1369,
"children": []
},
{
"id": 45126,
"name": "城区",
"pid": 1369,
"children": []
},
{
"id": 45137,
"name": "隔川乡",
"pid": 1369,
"children": []
}
]
},
{
"id": 1368,
"name": "上杭县",
"pid": 1362,
"children": [
{
"id": 45065,
"name": "白砂镇",
"pid": 1368,
"children": []
},
{
"id": 45078,
"name": "步云乡",
"pid": 1368,
"children": []
},
{
"id": 45075,
"name": "茶地镇",
"pid": 1368,
"children": []
}
]
}
]
},
{
"id": 1370,
"name": "宁德市",
"pid": 16,
"children": [
{
"id": 1377,
"name": "屏南县",
"pid": 1370,
"children": [
{
"id": 46200,
"name": "屏城乡",
"pid": 1377,
"children": []
},
{
"id": 46199,
"name": "长桥镇",
"pid": 1377,
"children": []
},
{
"id": 46195,
"name": "城区",
"pid": 1377,
"children": []
}
]
},
{
"id": 1373,
"name": "福鼎市",
"pid": 1370,
"children": [
{
"id": 46275,
"name": "白琳镇",
"pid": 1373,
"children": []
},
{
"id": 46274,
"name": "磻溪镇",
"pid": 1373,
"children": []
},
{
"id": 51502,
"name": "城区",
"pid": 1373,
"children": []
}
]
},
{
"id": 1372,
"name": "福安市",
"pid": 1370,
"children": [
{
"id": 46258,
"name": "坂中畲族乡",
"pid": 1372,
"children": []
},
{
"id": 55509,
"name": "城北街道",
"pid": 1372,
"children": []
},
{
"id": 55508,
"name": "城南街道",
"pid": 1372,
"children": []
}
]
}
]
}
]
}
]
}
]
核心代码主要是 findChildren 函数的实现。
