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

[
{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扁平数据转换树状数据的更多相关文章

  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. Wanafly 挑战赛 14 E 无效位置 (线性基+并查集)

    Wanafly 挑战赛 14 E 无效位置 (线性基+并查集) 传送门:https://ac.nowcoder.com/acm/contest/81/#question 题意: n个数,m次操作 一个 ...

  2. Checkpoint 防火墙修改网卡buffer

    近期有一台CP5100频繁丢包,修改网卡buffer步骤如下,默认的网卡buffer为256,最大可以修改为4096,其步骤如下: step1:ssh登录checkpoint 防火墙控制台 step2 ...

  3. Python6_模块、包、import、from import的解释

    先说一下模块和包是什么? 模块(module):简单来说一个模块(module)就是一个py文件.在python中是这么约定. 模块里面有函数.类,就是一组代码的集合.   模块显然要有一个名字,这个 ...

  4. Maven工程

    maven:父子工程 1,父工程并没有实质性的内容,所有的jar包都在里面,也就是说只需要管理jar包即可,不参与任务方法逻辑 2,在父工程中拥有很多的子模块,每一个子模块都代表了不用的包如(pack ...

  5. KEIL5.11安装小结

    一.注意点 1.安装路径不能带中文,必须是英文路径 2.安装目录不能跟 51 的 KEIL 或者 KEIL4 冲突,三者目录必须分开 3.KEIL5 不像 KEIL4 那样自带了很多厂商的 MCU 型 ...

  6. 22.re(正则表达式)

    转载:https://www.cnblogs.com/yuanchenqi/article/5732581.html 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Pyt ...

  7. 21.模块的执行以及__name__

    执行结果: "E:\Program Files\JetBrains\PycharmProjects\python_demo\venv\Scripts\python.exe" &qu ...

  8. RobotFramework+Appium 为了兼容iOS12,升级至Xcode10后,WebDriverAgent编译不通过:Undefind symbols for architecture x86_64

    报错信息如下: Undefined symbols for architecture arm64: "_OBJC_CLASS_$_XCElementSnapshot", refer ...

  9. springboot 动态修改定时任务

    1.静态定时 1)启动类加上注解@EnableScheduling @EnableAsync @EnableScheduling @SpringBootApplication @MapperScan( ...

  10. Kubernetes Clusters

    1. 创建集群 Kubernetes集群  Kubernetes协调一个高可用的计算机集群,作为一个单独的单元来一起工作.有了这种抽象,在Kubernetes中你就可以将容器化的应用程序部署到集群中, ...