zoukankan      html  css  js  c++  java
  • JS将扁平化的数据处理成Tree结构

    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": []
      }
    ]
  • 相关阅读:
    3个百度网盘下载实用小技巧
    decodeURIComponent 解码函数
    background属性怎么添加2个或多个背景图
    本地运行vue项目webpack提示 Compiled successfully
    var和let区别简述
    picture元素的使用
    博客园自定义鼠标icon
    background-size:100% 100% 和 background-size:cover的区别简述
    ScreenToGif——gif动图工具使用说明
    离职个人社保补缴——程序员也应该知道的社保基础知识科普
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11195768.html
Copyright © 2011-2022 走看看