Question I have a complex nested array structure with multiple layers of children. The API response is flat, but I can determine the parent based on ParentId.
Within my HTML, I need to iterate through each object and display its children. Is there an efficient way to write a createSelector and select a state at each iteration in the HTML, so that updating a nested child only re-renders the specific object that was changed?
I've researched Angular material table implementation for ideas, but I'm open to hearing about other concepts or approaches.
App information:
- Framework: Angular 5 universal
- State management: Ngrx
- Backend: Node + swagger
The API returns an array of objects with this structure:
{
"id": "299999999",
"parentId": "5ad4d",
"body": "string",
"type": "test"
}
Each object has a parentId field that indicates its child relationship within the hierarchy.
I store all items in a list within my application state. While this example shows 3 levels of nesting, in reality, I may have up to 20 levels deep.
interface AppState {
list: [
{
"id": "299999999",
"parentId": "5ad4d",
"body": "string",
"type": "test"
},
{
"id": "2abc",
"parentId": "299999999",
"body": "string",
"type": "test"
},
{
"id": "2abcd",
"parentId": "299999999",
"body": "string",
"type": "test"
},
{
"id": "2abcde",
"parentId": "299999999",
"body": "string",
"type": "test"
},
{
"id": "2abcde",
"parentId": "6dda4",
"body": "string",
"type": "test"
},
{
"id": "2abcdefg",
"parentId": "2abcde",
"body": "string",
"type": "test"
},
{
"id": "23sadasd",
"parentId": "2abcde",
"body": "string",
"type": "test"
},
{
"id": "12asdasd",
"parentId": "2abcde",
"body": "string",
"type": "test"
}
];
}