鍍金池/ 問答/HTML/ 實(shí)現(xiàn)樹形結(jié)構(gòu)數(shù)據(jù) es6

實(shí)現(xiàn)樹形結(jié)構(gòu)數(shù)據(jù) es6

var jsonArray = {

'data':{
    "List": [{
                "authorityId": 1,
                "authorityName": "數(shù)據(jù)分析",
                "grade": "1001",
                "fatherId": "0"
            },
            {
                "authorityId": 2,
                "authorityName": "商務(wù)政策",
                "grade": "1002",
                "fatherId": "0"
            },
            {
                "authorityId": 3,
                "authorityName": "市場動態(tài)",
                "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": "政策數(shù)據(jù)分析",
                "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"
            }
        ]
}

}
期望拼成下列樹形數(shù)據(jù)格式(用jq或是es6實(shí)現(xiàn))
對應(yīng)關(guān)系:父的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'
        }]
      }]
    }

]

回答
編輯回答
入她眼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
            var list = [{
                "authorityId": 1,
                "authorityName": "數(shù)據(jù)分析",
                "grade": "1001",
                "fatherId": "0"
            },
            {
                "authorityId": 2,
                "authorityName": "商務(wù)政策",
                "grade": "1002",
                "fatherId": "0"
            },
            {
                "authorityId": 3,
                "authorityName": "市場動態(tài)",
                "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": "政策數(shù)據(jù)分析",
                "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>
2017年5月31日 01:26