zoukankan      html  css  js  c++  java
  • 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;
        }
    
    
     
     
  • 相关阅读:
    C++命名规则
    protobuf_1
    以太网帧格式
    LinQ
    asp.mvc 基本知识
    Lucene.Net 优化索引生成,即搜索显示优化
    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用
    DataSet
    伪Excel导出新版代码
    WebUI 常用
  • 原文地址:https://www.cnblogs.com/dnghj/p/12249833.html
Copyright © 2011-2022 走看看