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": []
      }
    ]
  • 相关阅读:
    Delphi TStringList的用法
    Android Studio使用教程(一)
    如何在win7下安装和配置Android Studio
    python基础字符串单引号双引号和三引号
    同步和互斥
    posix多线程有感线程高级编程(条件变量)
    VMware网络配置详解
    posix多线程有感POSIX 线程间的内存可视性
    进程及相关API
    POSIX线程属性
  • 原文地址:https://www.cnblogs.com/AIonTheRoad/p/11195768.html
Copyright © 2011-2022 走看看