• 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": []
      }
    ]
  • 相关阅读:
    大学毕业4年-回顾和总结(1)-钱,金钱观
    VR开发中性能问题—OculusWaitForGPU
    动态规划(一)
    POJ 2229 Sumsets
    hihoCoder #1122 : 二分图二•二分图最大匹配之匈牙利算法
    hihoCoder #1127 : 二分图二·二分图最小点覆盖和最大独立集
    hihoCoder #1121 : 二分图一•二分图判定
    HDU 1978 How many ways
    POJ1579 Function Run Fun
    POJ 2081 Recaman's Sequence
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11195768.html
Copyright © 2020-2023  润新知