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": []
  }
]

JS将扁平化的数据处理成Tree结构的更多相关文章

  1. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

  2. js数组扁平化

    看到一个有趣的题目: var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 一个多维 ...

  3. JS: 数组扁平化

    数组扁平化 什么是数组扁平化? 数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层. // 多层嵌套 [1, 2, [3, 4]] // 一层 [1, 2, 3, 4] 递归实现 思 ...

  4. 使用js将后台返回的数据转换成树形结构

    将类似如下数据转换成树形的数据: [ { id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1 ...

  5. JS数组扁平化(flat)

    需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_ ...

  6. 【技术宅6】把一个无限级分类循环成tree结构

    function list_to_tree($list,$root=0,$pk='cid',$pid = 'pid',$child = '_child'){ if(is_array($list)) { ...

  7. js中数组扁平化处理

  8. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  9. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

随机推荐

  1. AVR单片机教程——串口接收

    本文隶属于AVR单片机教程系列.   上一讲中,我们实现了单片机开发板向电脑传输数据.在这一讲中,我们将通过电脑向单片机发送指令,让单片机根据指令控制LED.这一次,两端的TX与RX需要交叉连接,单片 ...

  2. 2020年十大OA办公系统排行榜

      最近几年办公信息化的不断发展,走向千家万户(企业),从刚开始的大型公司,政府企业到现在中小企业的加入,市场更加的庞大,产业前进很好,在协同办公这片市场中,有哪些公司独领风骚? 泛微OA:(www. ...

  3. 机器学习回顾篇(15):集成学习之GDBT

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  4. Docker windows nano server容器中安装ssh实现远程登录管理

    [问题] 使用ServiceMonitor.exe作为前台进程运行起来的容器无法attach. 无法远程连接到运行中的容器中进行管理. [解决方法] 在container中新建管理员用户,通过SSH实 ...

  5. NOI2.4 2011

    描述 已知长度最大为200位的正整数n,请求出2011^n的后四位. 输入 第一行为一个正整数k,代表有k组数据,k<=200接下来的k行, 每行都有一个正整数n,n的位数<=200 输出 ...

  6. Liunx(centos8)下的yum的基本用法和实例

    yum 命令 Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的 ...

  7. nginx之基础安装

    前言 nginx的安装方式可能不同,具体取决于操作系统:对于Linux,可以使用nginx.org的nginx软件包.在FreeBSD上,可以从软件包或通过端口系统安装nginx. 端口系统提供了更大 ...

  8. springIOC源码接口分析(四):MessageSource

    一 定义方法 MessageSource接口用于支持信息的国际化和包含参数的信息的替换 这个接口定义了三个方法: public interface MessageSource { /** * 解析co ...

  9. Java 加密/解密Excel

    概述 设置excel文件保护时,通常可选择对整个工作簿进行加密保护,打开文件时需要输入密码:或者对指定工作表进行加密,即设置表格内容只读,无法对工作表进行编辑.另外,也可以对工作表特定区域设置保护,即 ...

  10. demon病毒样本分析

    1. 简介 该样本是前几周爆发的THINKPHP漏洞中,被批量上传的一个病毒样本.如图所示. 2. 分析 该样本未经混淆,加壳,所以直接拖到IDA中即可分析. 首先从main函数开始.做一些初始化的函 ...