后台我拿的数据是这样的格式:

  1. [
  2. {id:1 , parentId: 0, name: '', level: 0},
  3. {id:2 , parentId: 0, name: '', level: 0},
  4. {id:3 , parentId: 2, name: '', level: 1},
  5. {id:4 , parentId: 2, name: '', level: 1},
  6. {id:5 , parentId: 4, name: '', level: 2},
  7. ]

转换后的数据差不多就是这样的格式

  1. {
  2. [
  3. {
  4. id: 1,
  5. name: ''
  6. },
  7. {
  8. id: 2,
  9. name: '',
  10. children: [
  11. {
  12. id: 3
  13. },
  14. {
  15. id: 4,
  16. children: [
  17. {
  18. id: 5
  19. }
  20. ]
  21. }
  22. ]
  23. },
  24. ]
  25. }
 
 

js转换方式

后台获取数组 jsonData 然后转换成树状的方式

  1. //吧后台json转换成树状形式
  2. format(jsonData) {
  3. var result = [], temp = {}, i = 0, j = 0, len = jsonData.length
  4. for (; i < len; i++) {
  5. temp[jsonData[i]['menuId']] = jsonData[i] // 以id作为索引存储元素,可以无需遍历直接定位元素
  6. }
  7. for (; j < len; j++) {
  8. var currentElement = jsonData[j]
  9. var tempCurrentElementParent = temp[currentElement['parentId']] // 临时变量里面的当前元素的父元素 parentId 父级ID
  10. if (tempCurrentElementParent) { // 如果存在父元素
  11. if (!tempCurrentElementParent['children']) { // 如果父元素没有chindren键
  12. tempCurrentElementParent['children'] = [] // 设上父元素的children键
  13. }
  14. tempCurrentElementParent['children'].push(currentElement) // 给父元素加上当前元素作为子元素
  15. } else { // 不存在父元素,意味着当前元素是一级元素
  16. result.push(currentElement);
  17. }
  18. }
  19.  
  20. return result;
  21. }
  1.  
  1.  
  1.  

JS实现 JSON扁平数据转换树状数据的更多相关文章

  1. json 平面转树状 child [zhuan]

    <script> /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父 ...

  2. d3.js(v5.7)树状图

    一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...

  3. 树状数据删除(TP5)

    应用场景:类似上图中树状菜单,选中一级菜单 点击上方删除按钮 所有子菜单删除 以下是代码截图(代码基于 TP5)

  4. mysql循环查询树状数据

    完整function )) ) CHARSET utf8 BEGIN ) ; ) ; SET str = ''; SET cid =cast(rootId as CHAR); WHILE cid is ...

  5. 复制新增树状数据_ParentID也需要更新

    CREATE TABLE TreeShip(  [ID] uniqueidentifier PRIMARY KEY NOT NULL,  [Name] [nvarchar](50) NULL,  [R ...

  6. Echart-无需json文件的树状图(源码)超级简单,小白的福音

    源码: <!DOCTYPE html> <head> <meta charset="utf-8"> <script type=" ...

  7. EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构

    最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...

  8. PHP递归实现层级树状展现数据

    树状数据展现很常用,今天学习了PHP的递归,也来总结总结! PHP代码: function _getTreeList_custom1($data,$parent_id,$depth) { $retur ...

  9. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

随机推荐

  1. sql临时表与变量表

    1)临时表存储在 tempdb 中,当不再使用时会自动删除 一般使用如下: --创建临时表 select * into #temp from TABLE --使用临时表 select * from # ...

  2. js获取url参数值的方式

    定义方法: function getParam(paramName) { paramValue = ""; isFound = false; paramName = paramNa ...

  3. CentOS 7防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firewall: systemctl stop firewalld.service #停止f ...

  4. Swagger Editor 本地搭建

    看了很多文章,怎么本地安装都比较乱,一番折腾,最后终于成功本地搭建Swagger Editor,记录如下(Windows 7): 进入命令行: (1)cd E:\Learning\AWS (2)git ...

  5. lombok工作原理分析

    在Lombok使用的过程中,只需要添加相应的注解,无需再为此写任何代码.但是自动生成的代码到底是如何产生的呢? 核心之处就是对于注解的解析上.JDK5引入了注解的同时,也提供了两种解析方式. 运行时解 ...

  6. 看完知乎上500条答案,我为大家整理了这21个B站学习类UP主

    原文之前发在我的知乎,转载请注明出处. ​ 虽然,今天算法文章还没更新┏(゜ロ゜;)┛,但还是溜过来跑个题~ 之前看到了博客上有小伙伴在分享自己的B站资源,才突然意识到自己其实也积攒了很多优秀UP的资 ...

  7. MyBatis原理-架构流程

    一 .MyBatis原理架构图 Mybatis的功能架构分为三层: API接口层:提供给外部使用的接口API,开发人员通过这些本地API来操纵数据库.接口层一接收到调用请求就会调用数据处理层来完成具体 ...

  8. 初次在cmd使用git命令上传项目至github方法(笔记)

    在一切开始之前,先推荐一个git简易工具书--Git_Cheat_Sheet,非常适合新手.自行搜索即可,也有热心者提供了中文版. 一.下载 Git 从Git官网下载Git安装包 https://gi ...

  9. mysql5.7 数据库自动备份脚本

    新建备份目录 mkdir /backups mkdir /backups/mysql 新建存放备份脚本目录 mkdir /data/scripts 备份脚本: mysql_backup.sh ==== ...

  10. 二分查找LintcodeNo14

    14First Position of Target 二分查找的基础题 STL lower_bound实现 class Solution { public: /** * @param nums: Th ...