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;
    }

 
 

原文地址:https://www.cnblogs.com/dnghj/p/12249833.html

时间: 2025-02-01 20:56:15

JS实现 JSON扁平数据转换树状数据的相关文章

json格式转树状结构

转自:http://rockyuse.iteye.com/blog/1541308 /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父id的字符串 * @param {String} children的字符串 * @return {Array} 数组 */ function transData(a, idStr, pidStr, chindrenStr){ var r = []

json 平面转树状 child [zhuan]

<script> /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父id的字符串 * @param {String} children的字符串 * @return {Array} 数组 */ function transData(a, idStr, pidStr, chindrenStr) { var r = [], hash = {}, id = idStr, pid =

根据树状数据渲染树状下拉选项 &#379261;

原文: http://blog.gqylpy.com/gqy/441 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

d3.js(v5.7)树状图

一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一篇关于path的?) 另外:此篇树状图用了博主自定义的automatch和attr(扩展版)函数,若有不明白的可参照之前的博客,避免控制台报错. 原文地址:https://www.cnblogs.com/eco-just/p/10055293.html

jquery-treegrid树状表格的使用(.Net平台)

上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一.使用treegrid,需要以下支持 jquery.min.js+jquery.treegrid.min.js 二.后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: 1 @using Model 2 @{ 3 Layout = nu

【 D3.js 入门系列 --- 9.5 】 树状图的制作

这一节学习树状图的制作.树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似. 本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 树状图( Tree )通常用于表示层级.上下级.包含与被包含关系.树状图的制作和 9.4节集群图的制作 的代码几乎完全一样.不错,你没看错,几乎完全一样.那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同.数据为: {

基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计,实现树状展示数据(treepanel)

先从后台讲起 1.表的设计 parent_id就是另外一条记录的id,无限极表设计可以参考  http://m.blog.csdn.net/Rookie_Or_Veteran/article/details/75711386 2.mysql查询很容易,关键是要把id,text,parentId查出来 <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//myb

D3树状图异步按需加载数据

D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但是,这里的异步加载,指的是一次性的将图形展示所需要的数据异步的方式加载到浏览器前端显示.主要有如下这两种方式: 1 d3.csv(url[[, row], callback]) 2 3 Creates a request for the CSV file at the specified url w

java对象转JSON JS取JSON数据

JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter() { @Override public boolean apply(Object arg0, String arg1, Object arg2) { // 过滤掉对象里的包含自己的属性(自己关联自己) if (arg1.equals("wareTypes") || arg1.equals("skillS&