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/ 一. ...
随机推荐
- .net core允许跨域
// 设置允许所有来源跨域 app.UseCors(options => { options.AllowAnyHeader(); options.AllowAnyMethod(); option ...
- 网易Java高级开发课程随笔
java学习也有6个月之久,记录下课程相关知识点,目前我还没有掌握,so仅作技术点记录 鉴于在.NET上我封装了一套开发框架,虽去年按.NET封装的思路自己也弄了个java开发框架,还是感觉对java ...
- 027.MFC_映射消息
映射消息MFC中的消息映射宏 DECLARE_MESSAGE_MAP BEGIN_MEASSAGE_MAP END_MESSAGE_MAP向导自动映射消息手动添加映射消息 MFC会帮我们自动映射大部分 ...
- javascript 闭包的理解(二)
// 定义一个User构造函数 function User(properties){ //遍历对象属性,确保它作用域正确 for(var i in properties){ (function(whi ...
- TemplateMethodPattern(模板方法模式)-----Java/.Net
一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.这种类型的设计模式属于行为型模式
- FlyweightPattern(享元模式)-----Java/.Net
享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式
- leetcode.310最小高度树
对于一个具有树特征的无向图,我们可选择任何一个节点作为根.图因此可以成为树,在所有可能的树中,具有最小高度的树被称为最小高度树.给出这样的一个图,写出一个函数找到所有的最小高度树并返回他们的根节点. ...
- 理解 RESTful API 设计规范
RESTful是目前最流行的API设计规范,它是用于Web数据接口的设计.从字面可以看出,他是Rest式的接口,所以我们先了解下什么是Rest. REST与技术无关,它代表的是一种软件架构风格,RES ...
- 【一起学源码-微服务】Ribbon 源码三:Ribbon与Eureka整合原理分析
前言 前情回顾 上一篇讲了Ribbon的初始化过程,从LoadBalancerAutoConfiguration 到RibbonAutoConfiguration 再到RibbonClientConf ...
- Web漏洞总结: OWASP Top 10
本文原创,更多内容可以参考: Java 全栈知识体系.如需转载请说明原处. 开发安全 - OWASP Top 10 在学习安全需要总体了解安全趋势和常见的Web漏洞,首推了解OWASP,因为它代表着业 ...