实现树形结构数据 es6

var jsonArray = {

'data':{
    "List": [{
                "authorityId": 1,
                "authorityName": "数据分析",
                "grade": "1001",
                "fatherId": "0"
            },
            {
                "authorityId": 2,
                "authorityName": "商务政策",
                "grade": "1002",
                "fatherId": "0"
            },
            {
                "authorityId": 3,
                "authorityName": "市场动态",
                "grade": "1003",
                "fatherId": "0"
            },
            {
                "authorityId": 4,
                "authorityName": "消息中心",
                "grade": "1004",
                "fatherId": "0"
            },
            {
                "authorityId": 5,
                "authorityName": "个人中心",
                "grade": "1005",
                "fatherId": "0"
            },
            {
                "authorityId": 6,
                "authorityName": "价格查询分析",
                "grade": "2101",
                "fatherId": "1001"
            },
            {
                "authorityId": 7,
                "authorityName": "销量查询分析",
                "grade": "2102",
                "fatherId": "1001"
            },
            {
                "authorityId": 8,
                "authorityName": "装备查询分析",
                "grade": "2103",
                "fatherId": "1001",
            },
            {
                "authorityId": 9,
                "authorityName": "政策数据分析",
                "grade": "2201",
                "fatherId": "1002"
            },
            {
                "authorityId": 10,
                "authorityName": "政策原件下载",
                "grade": "2202",
                "fatherId": "1002"
            },
            {
                "authorityId": 11,
                "authorityName": "新车上市",
                "grade": "2301",
                "fatherId": "1003"
            },
            {
                "authorityId": 12,
                "authorityName": "营销活动",
                "grade": "2302",
                "fatherId": "1003"
            }
        ]
}

}
期望拼成下列树形数据格式(用jq或是es6实现)
对应关系：父的grade=子的fatherid
data:[

{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1'
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1'
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1'
        }]
      }]
    }

]

es5 ecmascript-6 javascript

阅读 4.6k

2 个回答

得票最新

frontoldman

4.5k2220

发布于
2018-08-28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
            var list = [{
                "authorityId": 1,
                "authorityName": "数据分析",
                "grade": "1001",
                "fatherId": "0"
            },
            {
                "authorityId": 2,
                "authorityName": "商务政策",
                "grade": "1002",
                "fatherId": "0"
            },
            {
                "authorityId": 3,
                "authorityName": "市场动态",
                "grade": "1003",
                "fatherId": "0"
            },
            {
                "authorityId": 4,
                "authorityName": "消息中心",
                "grade": "1004",
                "fatherId": "0"
            },
            {
                "authorityId": 5,
                "authorityName": "个人中心",
                "grade": "1005",
                "fatherId": "0"
            },
            {
                "authorityId": 6,
                "authorityName": "价格查询分析",
                "grade": "2101",
                "fatherId": "1001"
            },
            {
                "authorityId": 7,
                "authorityName": "销量查询分析",
                "grade": "2102",
                "fatherId": "1001"
            },
            {
                "authorityId": 8,
                "authorityName": "装备查询分析",
                "grade": "2103",
                "fatherId": "1001",
            },
            {
                "authorityId": 9,
                "authorityName": "政策数据分析",
                "grade": "2201",
                "fatherId": "1002"
            },
            {
                "authorityId": 10,
                "authorityName": "政策原件下载",
                "grade": "2202",
                "fatherId": "1002"
            },
            {
                "authorityId": 11,
                "authorityName": "新车上市",
                "grade": "2301",
                "fatherId": "1003"
            },
            {
                "authorityId": 12,
                "authorityName": "营销活动",
                "grade": "2302",
                "fatherId": "1003"
            }
        ]

        var data = []


        function loop(list, data, fatherId) {
            list.forEach(item => {
                if (item.fatherId === fatherId) {
                    var child = {
                        label: item.authorityName,
                        grade: item.grade,
                        children: []
                    }

                    loop(list, child.children, item.grade)

                    data.push(child)
                }
            })
        }
        
        loop(list, data, '0')

        console.log(data)

    </script>
</body>
</html>

花花花

发布于
2021-03-29

新手上路，请多包涵

function formatDataTree(data,id,pid) {
    let _data = JSON.parse(JSON.stringify(data));
    return _data.filter( p => {
        const _arr = _data.filter( c => p[id] === c[pid] );
        _arr.length && (p.children = _arr)
        return p[pid] === 0
    })
};

let tree = formatDataTree(data,"grade","fatherId");

console.log(tree);

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

实现树形结构数据 es6

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？