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": []
      }
    ]
  • 相关阅读:
    Object.defineProperty方法 使用
    Linux常用命令--网终设置
    Linux常用命令--文件操作、权限设置
    Linux常用命令
    vue之双绑实现
    【Objective-C学习记录】第二十九天
    【Objective-C学习记录】第二十八天
    【Objective-C学习记录】第二十四天
    【Objective-C学习记录】第二十三天
    【Objective-C学习记录】第二十二天
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11195768.html
Copyright © 2011-2022 走看看