我有一組物件，其結構如下
const data = [ { depth:0, id:1, name:"data 1" }, { depth:0, id:2, name:"data 2" }, { depth:0, id:3, name:"資料 3" }, { depth:1, id:11, name:"data 11", parentid:1, }, { depth:1, id:12, name:"data 12", parentid:1, }, { depth:1, id:21, name:"data 21", parentid:2, }, { depth:1, id:31, name:"data 31", parentid:3, }, { depth:2, id: 111，名稱：“資料 111”，父 ID：11，}，{深度：2，ID：112，名稱：“資料 112”，父 ID：11，}，{深度：2，ID：113，名稱：“資料113", parentid:11, }, { depth:2, id:121, name:"data 121", parentid:12, }, { depth:2, id:122, name:"data 122", parentid:12 , }, { depth:2, id:211, name:"data 211", parentid:21, }, { depth:3, id:2111, name:"data 2111", parentid:211, }, { depth: 3、身份證號：2112，姓名：”資料 2112", parentid:211, }]
我想要如下的輸出
const output= [
{
depth:0,
id:1,
name:"data 1",
childs:[
{
depth:1,
id:11,
name:"data 11",
parentid:1,
childs:[
{
depth:2,
id:111,
name:"data 111",
parentid:11,
},
{
depth:2,
id:112,
name:"data 112",
parentid:11,
},
{
depth:2,
id:113,
name:"data 113",
parentid:11,
},
]
},
{
depth:1,
id:12,
name:"data 12",
parentid:1,
childs:[
{
depth:2,
id:121,
name:"data 121",
parentid:12,
},
{
depth:2,
id:122,
name:"data 122",
parentid:12,
},
]
},
]
},
{
depth:0,
id:2,
name:"data 2",
childs:[
{
depth:1,
id:21,
name:"data 21",
parentid:2,
childs:[
{
depth:2,
id:211,
name:"data 211",
parentid:21,
childs:[
{
depth:3,
id:2111,
name:"data 2111",
parentid:211,
},
{
depth:3,
id:2112,
name:"data 2112",
parentid:211,
},
]
}
]
}
]
},
{
depth:0,
id:3,
name:"data 3",
childs:[
{
depth:1,
id:31,
name:"data 31",
parentid:3,
},
]
},
]
- 實作這個輸出的關鍵因素是depth,id,parentid
- 每個子物件的 parentid 陣列都應該匹配它們的 parent id。我嘗試了一些 map、filter、for 回圈方法，但它沒有按我預期的那樣作業。我怎樣才能在Javascript中實作這個輸出？
uj5u.com熱心網友回復：
你可以做這樣的事情
const createTree = data => {
const initials = data.filter(d => !d.parentid)
const loop = (item) => {
const childs = data.filter(d => d.parentid === item.id)
if(!childs.length){
return item
}
return {
...item,
childs: childs.map(loop)
}
}
return initials.map(loop)
}
const data = [ { depth:0, id:1, name:"data 1" }, { depth:0, id:2, name:"data 2" }, { depth:0, id:3, name:"data 3" }, { depth:1, id:11, name:"data 11", parentid:1, }, { depth:1, id:12, name:"data 12", parentid:1, }, { depth:1, id:21, name:"data 21", parentid:2, }, { depth:1, id:31, name:"data 31", parentid:3, }, { depth:2, id:111, name:"data 111", parentid:11, }, { depth:2, id:112, name:"data 112", parentid:11, }, { depth:2, id:113, name:"data 113", parentid:11, }, { depth:2, id:121, name:"data 121", parentid:12, }, { depth:2, id:122, name:"data 122", parentid:12, }, { depth:2, id:211, name:"data 211", parentid:21, }, { depth:3, id:2111, name:"data 2111", parentid:211, }, { depth:3, id:2112, name:"data 2112", parentid:211, }]
const tree = createTree(data)
console.log(tree)轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482210.html
標籤：javascript 数组 反应 排序