JS实现 JSON扁平数据转换树状数据
后台我拿的数据是这样的格式:

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

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

{
[
{
id: 1,
name: ''
},
{
id: 2,
name: '',
children: [
{
id: 3
},
{
id: 4,
children: [
{
id: 5
}
]
}
]
},
]
}

js转换方式
后台获取数组 jsonData 然后转换成树状的方式
//吧后台json转换成树状形式
format(jsonData) {
var result = [], temp = {}, i = 0, j = 0, len = jsonData.length
for (; i < len; i++) {
temp[jsonData[i]['menuId']] = jsonData[i] // 以id作为索引存储元素,可以无需遍历直接定位元素
}
for (; j < len; j++) {
var currentElement = jsonData[j]
var tempCurrentElementParent = temp[currentElement['parentId']] // 临时变量里面的当前元素的父元素 parentId 父级ID
if (tempCurrentElementParent) { // 如果存在父元素
if (!tempCurrentElementParent['children']) { // 如果父元素没有chindren键
tempCurrentElementParent['children'] = [] // 设上父元素的children键
}
tempCurrentElementParent['children'].push(currentElement) // 给父元素加上当前元素作为子元素
} else { // 不存在父元素,意味着当前元素是一级元素
result.push(currentElement);
}
} return result;
}
JS实现 JSON扁平数据转换树状数据的更多相关文章
- json 平面转树状 child [zhuan]
<script> /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父 ...
- d3.js(v5.7)树状图
一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
- 树状数据删除(TP5)
应用场景:类似上图中树状菜单,选中一级菜单 点击上方删除按钮 所有子菜单删除 以下是代码截图(代码基于 TP5)
- mysql循环查询树状数据
完整function )) ) CHARSET utf8 BEGIN ) ; ) ; SET str = ''; SET cid =cast(rootId as CHAR); WHILE cid is ...
- 复制新增树状数据_ParentID也需要更新
CREATE TABLE TreeShip( [ID] uniqueidentifier PRIMARY KEY NOT NULL, [Name] [nvarchar](50) NULL, [R ...
- Echart-无需json文件的树状图(源码)超级简单,小白的福音
源码: <!DOCTYPE html> <head> <meta charset="utf-8"> <script type=" ...
- EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构
最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...
- PHP递归实现层级树状展现数据
树状数据展现很常用,今天学习了PHP的递归,也来总结总结! PHP代码: function _getTreeList_custom1($data,$parent_id,$depth) { $retur ...
- jquery-treegrid树状表格的使用(.Net平台)
上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...
随机推荐
- 一个简单的Web服务器-支持Servlet请求
上接 一个简单的Web服务器-支持静态资源请求,这个服务器可以处理静态资源的请求,那么如何处理Servlet请求的呢? 判断是否是Servlet请求 首先Web服务器需要判断当前请求是否是Servle ...
- 云栖深度干货 | 打造“云边一体化”,时序时空数据库TSDB技术原理深度解密
本文选自云栖大会下一代云数据库分析专场讲师自修的演讲——<TSDB云边一体化时序时空数据库技术揭秘> 自修 —— 阿里云智能数据库产品事业部高级专家 认识TSDB 第一代时序时 ...
- CString 的成员函数详解
CSTRING的成员函数详解 typedef ATL::CStringT< TCHAR, StrTraitMFC_DLL< TCHAR > > CString;CStrin ...
- kali添加路由
kali添加路由 vim /etc/network/interfaces iface eth0 inet static address 192.168.1.10 netmask 255.255.255 ...
- 数据多js平均时间取固定条数展示,echarts数据多处理数据
js代码: function getfailurerate(start,end,ip) { $.ajax( { url : "report/getvirtual.action", ...
- 怎么安装GUI
python安装easygui的过程中,下载的是0.97.安装的时候提示setuptools模块不存在.然后又去安装setuptools等等, 真麻烦.也没有成功.后来又下载了0.96的.才成功.下面 ...
- 一款类似loadRunner的优秀国产压力测试工具——kylinTOP测试与监控平台
市面上流行的压力/负载/性能测试工具多是来自国外,近年来国内的性能测试工具也如雨后春笋般崛起,但大部分产品是基于Jmeter开源内核包装起来的性能测试工具,其中也不乏佼佼者,如:kylinTOP测试与 ...
- Web基础了解版10-Filter-Listener
Filter 对于WEB应用来说,过滤器是一个驻留在服务器中的WEB组件,他可以截取客户端和WEB资源之间的请求和响应信息. 在一个WEB应用中可以部署多个过滤器,多个过滤器就组成了一个过滤器链,请求 ...
- linux下安装MariaDB数据库
搜素某个文件:find / -name '文件名(或文件夹名)' 1.编辑yum源:vi /etc/yum.repos.d/MariaDB.repo 2.编辑文件时用到的vi命令: vi 打开一个不存 ...
- mac系统Docker安装Redis教程
在之前介绍过mac系统安装docker,以及docker安装mysql的傻瓜式教程,如果有需要参考的朋友,可以看下面文章: MacOS安装Docker傻瓜式教程 mac系统下docker安装配置mys ...