Wie formatiere ich eine einfache Abfrage in ein Hierarchie-JSON-Objekt? ⇐ JavaScript

[Guest]

Ich möchte eine einfache Abfrage in Hierarchie-JSON formatieren, um sie im Front-End anzuzeigen, aber ich weiß nicht, wie
Ich habe möglicherweise eine relationale Datenbank mit einer Tabelle namens „Todo“. folgende Spalte

• ID
• Name
• ParentID

zum Beispiel

Code: Select all

[
{id: 2, Name:"Task 1.1", ParentID: 1},
{id: 5, Name:"Task 2", ParentID: null},
{id: 6, Name:"Task 2.1", ParentID: 5},
{id: 1, Name:"Task 1", ParentID: null},
{id: 3, Name:"Task 1.2", ParentID: 1},
{id: 4, Name:"Task 1.3", ParentID: 1},
{id: 7, Name:"Task 2.2", ParentID: 5},
{id: 8, Name:"Task 2.3", ParentID: 5},
{id: 9, Name:"Task 3", ParentID: null}
]

bis

Code: Select all

[
{
"id": 5,
"Name": "Task 2",
"ParentID": null,
"subtasks": [
{
"id": 6,
"Name": "Task 2.1",
"ParentID": 5,
"subtasks": []
},
{
"id": 7,
"Name": "Task 2.2",
"ParentID": 5,
"subtasks": []
},
{
"id": 8,
"Name": "Task 2.3",
"ParentID": 5,
"subtasks": []
}
]
},
{
"id": 1,
"Name": "Task 1",
"ParentID": null,
"subtasks": [
{
"id": 2,
"Name": "Task 1.1",
"ParentID": 1,
"subtasks": []
},
{
"id": 3,
"Name": "Task 1.2",
"ParentID": 1,
"subtasks": []
},
{
"id": 4,
"Name": "Task 1.3",
"ParentID": 1,
"subtasks": []
}
]
},
{
"id": 9,
"Name": "Task 3",
"ParentID": null,
"subtasks": []
}
]

Für zwei Ebenen (Root und Kinder) versuche ich, Todos, die keine übergeordnete ID (Root) haben, in ein Array zu verschieben und dann Todos, die über ein übergeordnetes Element verfügen, in das übergeordnete Todo zu verschieben
Ich habe eine Hierarchie mit zwei Ebenen ausprobiert und denke, dass sie gut funktioniert, weiß aber nicht, wie ich mehr Ebenen in meinem next.js-Projekt implementieren kann, und ich bin mir nicht ganz sicher, ob dies eine gute Vorgehensweise ist oder nicht.
hier der Code, den ich habe versucht.

Code: Select all

const data = [
{id: 2, Name:"Task 1.1", ParentID: 1},
{id: 5, Name:"Task 2", ParentID: null},
{id: 6, Name:"Task 2.1", ParentID: 5},
{id: 1, Name:"Task 1", ParentID: null},
{id: 3, Name:"Task 1.2", ParentID: 1},
{id: 4, Name:"Task 1.3", ParentID: 1},
{id: 7, Name:"Task 2.2", ParentID: 5},
{id: 8, Name:"Task 2.3", ParentID: 5},
{id: 9, Name:"Task 3", ParentID: null},
];

function buildHierarchy(data) {
let result = [];
let todos = [...data];

// construct root level
todos.forEach((task)=>{
if(task.ParentID === null){
const new_task = {...task, subtasks:[]}

result.push(new_task)
}
})

// constrct child level
result.forEach((parent, index)=>{
todos.forEach((task)=>{
if(task.ParentID === parent.id){
const new_task = {...task, subtasks:[]}

parent.subtasks.push(new_task)
}
})
})

return result
}

const result = buildHierarchy(data);
console.log(JSON.stringify(result,null,2));