I am having a hard time applying the data received from the database to select components.
My database is
| id | code | name | parent_name |
|---|---|---|---|
| 1 | 1000 | Marvel | |
| 2 | 1100 | X-man | Marvel |
| 3 | 1110 | Wolverine | X-man |
| 4 | 1120 | Professor X | X-man |
| 5 | 1200 | Avengers | Marvel |
| 6 | 1210 | Captain America | Avengers |
| 7 | 1211 | Peggy Carter | Captain America |
| 8 | 1220 | Iron Man | Avengers |
| 9 | 1221 | Tony Startk | Iron Man |
| 10 | 1222 | War Machines | Iron Man |
| 11 | 2000 | DC | |
| 12 | 2100 | BatMan | DC |
| 13 | 2200 | SuperMan | DC |
dbDataArray is here
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": []
},
]
I need to treeDataArray. like this.
[
{
"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": []
},
]
},
]
How Can I... please help me
CodePudding user response：
You could create a Map keyed by title and with the corresponding objects as values. Then use that map to retrieve for each object the parent object, and insert it in the parent's children array.
Here is how that could look:
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);