转化Json数组成树状图自己的一些小见解

最新推荐文章于 2024-07-16 16:19:17 发布

weixin_41748528

最新推荐文章于 2024-07-16 16:19:17 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41748528/article/details/82903419

本文介绍了如何将Json数组转换为树状结构，并提供了一段JavaScript实现代码。通过遍历Json数组并构建父子关系，最终形成树形结构。示例中展示了如何处理具有parentId属性的节点，将它们组织成具有children子节点的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domtree</title>
</head>
<body>
<script>
var nodes=[
   {id:2,text:"爷爷",parentId:0},
   {id:4,text:"父亲",parentId:2},
   {id:12,text:"叔叔",parentId:2},
   {id:10,text:"我",parentId:4},
   {id:8,text:"弟弟",parentId:4},
   ]
function Dom(nodes){
   var obj={}
   for(var i=0;i<nodes.length;i++)

       {//console.log(typeof obj[nodes.parentId]);
       if(!obj[nodes[i].parentId]){obj[nodes[i].parentId]=[]}
       obj[nodes[i].parentId].push(nodes[i])
       delete nodes[i].parentId;
       }
   var a=Object.keys(obj); //核心就是利用它
   for(var i=0;i<a.length;i++)
   {
   obj[a[i]].forEach(function(item,index){

       if(a.indexOf(String(item.id))!=-1){item.children=obj[item.id]}
       })
   }
   return obj[Number(a[0])]
   }
console.log(Dom(nodes));
</script>
</body>
</html>