首页 > Web开发 > 详细

JS实现 JSON扁平数据转换树状数据

时间:2020-02-01 20:18:11      阅读:96      评论:0      收藏:0      [点我收藏+]

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

技术分享图片
[
{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扁平数据转换树状数据

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!