码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-02-01 21:21:19      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:代码   定位元素   code   技术   src   span   直接   获取   i++   

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

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

标签:代码   定位元素   code   技术   src   span   直接   获取   i++   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!