我很難應用從資料庫接收的資料來選擇組件。
我的資料庫是
| ID | 代碼 | 姓名 | 父母名字 |
|---|---|---|---|
| 1個 | 1000 | 奇跡 | |
| 2個 | 1100 | X戰警 | 奇跡 |
| 3個 | 1110 | 金剛狼 | X戰警 |
| 4個 | 1120 | X教授 | X戰警 |
| 5個 | 1200 | 復仇者聯盟 | 奇跡 |
| 6個 | 1210 | 美國隊長 | 復仇者聯盟 |
| 7 | 1211 | 佩吉卡特 | 美國隊長 |
| 8個 | 1220 | 鋼鐵俠 | 復仇者聯盟 |
| 9 | 1221 | 托尼·斯塔克 | 鋼鐵俠 |
| 10 | 1222 | 戰爭機器 | 鋼鐵俠 |
| 11 | 2000 | 直流電 | |
| 12 | 2100 | 蝙蝠俠 | 直流電 |
| 13 | 2200 | 超人 | 直流電 |
dbDataArray 在這里
type TreeSelectType = {
title: string;
value: string;
key: string;
parentName: string | undefined;
children: TreeSelectType[];
};
const dbDataArray: TreeSelectType[] = [];
dbData.forEach(data => {
dbDataArray.push({
"title": data.name,
"value": data.code,
"key": data.code,
"parentName": data.parent_name,
"children": []
});
});
console.log(dbDataArray)
[
{
"title": "Marvel",
"value": "1000",
"key": "1000",
"parentName": null,
"children": []
},
{
"title": "X-man",
"value": "1100",
"key": "1100",
"parentName": "Marvel",
"children": []
},
{
"title": "Wolverine",
"value": "1110",
"key": "1110",
"parentName": "X-man",
"children": []
},
{
"title": "Professor X",
"value": "1120",
"key": "1120",
"parentName": "X-man",
"children": []
},
{
"title": "Avengers",
"value": "1200",
"key": "1200",
"parentName": "Marvel",
"children": []
},
{
"title": "Captain America",
"value": "1210",
"key": "1210,
"parentName": "Avengers",
"children": []
},
{
"title": "Peggy Carter",
"value": "1211",
"key": "1211",
"parentName": "Captain America",
"children": []
},
{
"title": "Iron Man",
"value": "1220",
"key": "1220",
"parentName": "Avengers",
"children": []
},
{
"title": "Tony Startk",
"value": "1221",
"key": "1221",
"parentName": "Iron Man",
"children": []
},
{
"title": "War Machines",
"value": "1222",
"key": "1222",
"parentName": "Iron Man",
"children": []
},
{
"title": "DC",
"value": "2000",
"key": "2000",
"parentName": null,
"children": []
},
{
"title": "BatMan",
"value": "2100",
"key": "2100",
"parentName": "DC",
"children": []
},
{
"title": "SuperMan",
"value": "2200",
"key": "2200",
"parentName": "DC",
"children": []
},
]
我需要 treeDataArray。像這樣。
[
{
"title": "Marvel",
"value": "1000",
"key": "1000",
"parentName": "Marvel",
"children": [
{
"title": "X-man",
"value": "1100",
"key": "1100",
"parentName": "Marvel",
"children": [
{
"title": "Wolverine",
"value": "1110",
"key": "1110",
"parentName": "X-man",
"children": []
},
{
"title": "Professor X",
"value": "1120",
"key": "1120",
"parentName": "X-man",
"children": []
},
],
},
{
"title": "Avengers",
"value": "1200",
"key": "1200",
"parentName": "Marvel",
"children": [
{
"title": "Captain America",
"value": "1210",
"key": "1210,
"parentName": "Avengers",
"children": [
{
"title": "Peggy Carter",
"value": "1211",
"key": "1211",
"parentName": "Captain America",
"children": []
},
]
},
{
"title": "Iron Man",
"value": "1220",
"key": "1220",
"parentName": "Avengers",
"children": [
{
"title": "Tony Startk",
"value": "1221",
"key": "1221",
"parentName": "Iron Man",
"children": []
},
{
"title": "War Machines",
"value": "1222",
"key": "1222",
"parentName": "Iron Man",
"children": []
},
]
},
]
},
]
},
{
"title": "DC",
"value": "2000",
"key": "2000",
"parentName": null,
"children": [
{
"title": "BatMan",
"value": "2100",
"key": "2100",
"parentName": "DC",
"children": []
},
{
"title": "SuperMan",
"value": "2200",
"key": "2200",
"parentName": "DC",
"children": []
},
]
},
]
我怎么能...請幫助我
uj5u.com熱心網友回復：
您可以創建一個由相應物件作為值的Map鍵控物件。title然后使用該映射為每個物件檢索父物件，并將其插入父物件的children陣列中。
這是它的樣子：
const dbDataArray = [{"title": "Marvel","value": "1000","key": "1000","parentName": null,"children": []},{"title": "X-man","value": "1100","key": "1100","parentName": "Marvel","children": []},{"title": "Wolverine","value": "1110","key": "1110","parentName": "X-man","children": []},{"title": "Professor X","value": "1120","key": "1120","parentName": "X-man","children": []},{"title": "Avengers","value": "1200","key": "1200","parentName": "Marvel","children": []},{"title": "Captain America","value": "1210","key": "1210","parentName": "Avengers","children": []},{"title": "Peggy Carter","value": "1211","key": "1211","parentName": "Captain America","children": []},{"title": "Iron Man","value": "1220","key": "1220","parentName": "Avengers","children": []},{"title": "Tony Startk","value": "1221","key": "1221","parentName": "Iron Man","children": []},{"title": "War Machines","value": "1222","key": "1222","parentName": "Iron Man","children": []},{"title": "DC","value": "2000","key": "2000","parentName": null,"children": []},{"title": "BatMan","value": "2100","key": "2100","parentName": "DC","children": []},{"title": "SuperMan","value": "2200","key": "2200","parentName": "DC","children": []},]
const result = [];
const map = new Map(dbDataArray.map(o => [o.title, o])).set(null, {children: result});
for (const o of dbDataArray) map.get(o.parentName).children.push(o);
console.log(result);轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/537820.html