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/ 一. ...
随机推荐
- FreeSql配合仓储实现软删除
该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前段时间使用FreeSql作为ORM,写了一个简单的CMS,在这里总结一下其中的使用心得. 仓储配合全局过滤器 1. 统一的删除标志 如:数据库字 ...
- Unitils集成DBUnit、Spring-单元测试(转)
1.maven-pom文件中引入相关jar包 <!-- Unitils -dbunit.Spring --> <dependency> <groupId>org.u ...
- STM32的RTC晶振不起振的原因及解决方法
STM32的RTC晶振经常出现不起振的问题,这已经是“业界共识”了.很多人在各种电子论坛上求助类似于“求高手指点!RTC晶振不起振怎么办”的问题,而其答案基本可以概括为“这次高手帮不了你了” 更有阴谋 ...
- PHP每日复习任务与复习记录
[2019-10-10 16:05:00] PHP7之Trait详解 https://blog.csdn.net/qq_35255775/article/details/80610586 PHP中的魔 ...
- 洛谷$P2057\ [SHOI2007]$ 善意的投票 网络流
正解:网络流 解题报告: 传送门! $umm$看到每个人要么0要么1就考虑最小割呗,,,? 然后贡献有两种?一种是违背自己的意愿,一种是和朋友的意愿违背了 所以考虑开一排点分别表示每个人,然后$S$表 ...
- $Poj3017\ Cut\ The\ Sequence$ 单调队列优化$DP$
Poj AcWing Description 给定一个长度为N的序列 A,要求把该序列分成若干段,在满足“每段中所有数的和”不超过M的前提下,让“每段中所有数的最大值”之和最小. N<=10 ...
- 2020你还不会Java8新特性?方法引用详解及Stream 流介绍和操作方式详解(三)
方法引用详解 方法引用: method reference 方法引用实际上是Lambda表达式的一种语法糖 我们可以将方法引用看作是一个「函数指针」,function pointer 方法引用共分为4 ...
- 「洛谷P1198」 [JSOI2008]最大数 解题报告
P1198 [JSOI2008]最大数 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制: ...
- Go并发编程
概述 简而言之,所谓并发编程是指在一台处理器上"同时"处理多个任务. 随着硬件的发展,并发程序变得越来越重要.Web服务器会一次处理成千上万的请求.平板电脑和手机app在渲染用户画 ...
- Python 线性回归(Linear Regression) 基本理解
背景 学习 Linear Regression in Python – Real Python,对线性回归理论上的理解做个回顾,文章是前天读完,今天凭着记忆和理解写一遍,再回温更正. 线性回归(Lin ...