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

[
{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. Xamarin 的一些资源汇总

    https://github.com/xamarin/xamarin-forms-sampleshttps://github.com/EgorBo/CrossChat-Xamarin.Formshtt ...

  2. springcloud玩转单点登录【oauth】

    随着公司项目的庞大,单点登录变得尤为重要,那么怎么实现单点登录,下面已oauth为标准实现单点登录. [特别鸣谢:魔乐科技,附上官网:www.mldn.cn] 1:项目组织结构 本项目为oAuth修改 ...

  3. 泛型 List转换成DataTable

    private DataTable listToDataTable<T>(List<T> ListItem) { //实列化DataTable对象 var dt = new D ...

  4. 分布式全局唯一ID生成策略

    为什么分布式系统需要用到ID生成系统 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据库的分库分表后需要有 ...

  5. 再见,Python2。你好,Python3

     文章首发自我的公众号,转载请注明出处~ ​ Python2的退场,意味着一个时代的结束 ​ 我们这一代程序员基本都接触过python2,很多人也是从python2时代一路走来的.但是,是时候说再见了 ...

  6. notpad++使用cmd的快捷键设置

    notepad++运行批处理的设置: 运行 --> 输入运行程序名"$(FULL_CURRENT_PATH)" --> 保存(自定义的快捷键即可运行)

  7. centos7.3安装chrome

    Centos7安装chrome浏览器 1.配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /ect/yum.repos.d/ vim ...

  8. Intellij Idea插件使用记录之Alibaba Java Coding Guidelines

    目录 Intellij Idea插件Alibaba Java Coding Guidelines 前言 使用 感谢 Intellij Idea插件Alibaba Java Coding Guideli ...

  9. 天梯 L2 树的遍历(已知后序中序求层序)

    树的遍历 (25 分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点的个数.第二行 ...

  10. 【转】面向GC的Java编程

    Java程序员在编码过程中通常不需要考虑内存问题,JVM经过高度优化的GC机制大部分情况下都能够很好地处理堆(Heap)的清理问题.以至于许多Java程序员认为,我只需要关心何时创建对象,而回收对象, ...