js將有父子關係的數據轉換成樹形結構數據spa
好比以下基本數據:code
let allDatas = [ { id: 3, name: 'bbbb', parendId: 1 }, { id: 2, name: 'aaaaa', parendId: 2 }, { id: 4, name: 'ccccc', parendId: 1 }, { id: 5, name: 'ddddd', parendId: 4 }, { id: 6, name: 'eeeee', parendId: 4 }, { id: 7, name: 'ffff', parendId: 6 }, { id: 8, name: 'ggggg', parendId: 3 }, { id: 9, name: 'hhhhh', parendId: 5 }, { id: 10, name: 'jjjj', parendId: 6 } ];
須要轉換成以下數據格式,以下:blog
[ { "id": 3, "name": "bbbb", "children": [ { "id": 8, "name": "ggggg", "children": [] } ] }, { "id": 4, "name": "ccccc", "children": [ { "id": 5, "name": "ddddd", "children": [ { "id": 9, "name": "hhhhh", "children": [] } ] }, { "id": 6, "name": "eeeee", "children": [ { "id": 7, "name": "ffff", "children": [] }, { "id": 10, "name": "jjjj", "children": [] } ] } ] } ]
如上id爲8的父節點就是id爲3的,而id爲3的父節點爲1,可是父節點目前沒有,因此id爲3就是頂級節點了。同理其餘的也是同樣的道理;io
JS代碼以下:console
// 屬性配置設置 let attr = { id: 'id', parendId: 'parendId', name: 'name', rootId: 1 }; function toTreeData(data, attr) { let tree = []; let resData = data; for (let i = 0; i < resData.length; i++) { if (resData[i].parendId === attr.rootId) { let obj = { id: resData[i][attr.id], name: resData[i][attr.name], children: [] }; tree.push(obj); resData.splice(i, 1); i--; } } var run = function(treeArrs) { if (resData.length > 0) { for (let i = 0; i < treeArrs.length; i++) { for (let j = 0; j < resData.length; j++) { if (treeArrs[i].id === resData[j][attr.parendId]) { let obj = { id: resData[j][attr.id], name: resData[j][attr.name], children: [] }; treeArrs[i].children.push(obj); resData.splice(j, 1); j--; } } run(treeArrs[i].children); } } }; run(tree); return tree; } let arr = toTreeData(allDatas, attr); console.log(arr);