JS将扁平化的数据处理成Tree结构
2024-09-28 03:52:45
let jsonData= [
{ id:1, parentId:0, name:"一级菜单A" },
{ id:2, parentId:0, name:"一级菜单B"},
{ id:3, parentId:0, name:"一级菜单C"},
{ id:4, parentId:1, name:"二级菜单A-A"},
{ id:5, parentId:1, name:"二级菜单A-B"},
{ id:6, parentId:2, name:"二级菜单B-A"},
{ id:7, parentId:4, name:"三级菜单A-A-A"},
{ id:8, parentId:7, name:"四级菜单A-A-A-A"},
{ id:9, parentId:8, name:"五级菜单A-A-A-A-A"},
];
将上述扁平化数据转化成树形结构
function formatTree(obj){
let copyedObj = JSON.parse(JSON.stringify(obj)) //深拷贝源数据
return copyedObj.filter(parent=>{
let findChildren = copyedObj.filter(child=>{
return parent.id === child.parentId
})
findChildren.length>0 ? parent.children = findChildren : parent.children = []
return parent.parentId == 0 //返回顶层，依据实际情况判断这里的返回值
})
}
}
console.log(JSON.stringify(formatTree(jsonData),null,3))
[
{
"id": 1,
"parentId": 0,
"name": "一级菜单A",
"children": [{
"id": 4,
"parentId": 1,
"name": "二级菜单A-A",
"children": [{
"id": 7,
"parentId": 4,
"name": "三级菜单A-A-A",
"children": [{
"id": 8,
"parentId": 7,
"name": "四级菜单A-A-A-A",
"children": [{
"id": 9,
"parentId": 8,
"name": "五级菜单A-A-A-A-A",
"children": []
}]
}]
}]
},
{
"id": 5,
"parentId": 1,
"name": "二级菜单A-B",
"children": []
}]
},
{
"id": 2,
"parentId": 0,
"name": "一级菜单B",
"children": [{
"id": 6,
"parentId": 2,
"name": "二级菜单B-A",
"children": []
}]
},
{
"id": 3,
"parentId": 0,
"name": "一级菜单C",
"children": []
}
]
最新文章
- IOS开发基础知识--碎片37
- MySQL显示中文
- UVa 1347 Tour
- 《OD大数据实战》Storm环境搭建
- 性能测试-Jmeter
- 微软职位内部推荐-Principal Dev Manager for Windows Phone Shell
- HTML+CSS基础学习笔记（6）
- 用UIKIT的模态对话框要注意的地方
- 监听RecyclerView滑动到末端
- 使用PHP进行SOCKET编程
- UNION ALL的用法
- 猜字母游戏（Java）
- GitHub 翻译之 'Hello-world' 翻译
- StanFord ML 笔记 第三部分
- [原创]K8正方系统密码解密工具
- KJHttp框架使用讲解
- 详解Oracle手动创建数据库几大步骤
- 拖拽demo--兼容--全局捕获
- linux 扩展权限
- mybatis逆向工程mbg