ANGULAR - How to properly handle multilevel JSON responses? - json

Question

I am using a rest API, sending a GET request and getting the following JSON structure as a result:
{
"Id": "Sample Id",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id1",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id2",
"Attributes": {
"ReadOnly": false
}
}
]
},
{
"Id": "Sample Name2",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id2",
"Attributes": {
"ReadOnly": false
}
}
]
}
]
}
It is basically a file system structure. So it is possible to have N objects(Id, Attributes{}, Children[]) in the root as well as in any other level of the structure.
Trying to explain a little bit better, the root node has its attributes and an array of N children that have its attributes and another Array of N children and so on...
How would be the correct way to handle this situation?
I have created a flat interface structure, looking basically like that:
export interface Hana{
Id: string,
Attributes: {
ReadOnly: string
}
}
I have also created a service and a component as follows:
Service
getHanaStructure(): Observable<Hana[]> {
const hanaStructs = this.http.get<Hana[]>(this.apiUrl);
this.messageService.add('HanaService: fetched struct');
return hanaStructs;
Component
hanaStructures$: Observable<Hana[]>;
getHanaStructure() : void {
this.hanaStructures$ = this.hanaService.getHanaStructure().pipe(map(data=> _.toArray(data)));
}
In order to show the data my HTML template looks like that:
<ul *ngIf="hanaStructures$ | async as hanaStructures else noData">
<li *ngFor="let hana of hanaStructures">
{{hana}}
</li>
</ul>
<ng-template #noData>No Data Available</ng-template>
The first problem is that I don't know to access the information by its key, I can just list their values. When I try something like {{ hana.Id }} instead of just {{ hana }} I got: *
"Property 'Id' does not exist on type 'Hana'"
The second issue is that I can only manage to list the first level data. I don´t know how access the Children of the Children of Children...
I am sure that the API is returning everything I need, but unfortunately I don´t know how to solve the problem.
Thanks,
Filipe

Answer 1

At first I would define the "Children" property in your Hana Interface as List of "Hana" Interfaces (This has some similarity with a resursive approach). Afterwards I would create a seperate Component, which gets displayed if you loop through the first layer of your children. This component should contain a loop of its own to loop through deeper nested components recursively.
Hope this was understandable and helps you. =)