Currently, I am facing an issue with accessing nested objects referred to by numbers. After making a service call to retrieve a JSON object, I mapped each field to another object which will be used for displaying the fields in HTML.
The problem arises when dealing with nested objects. Take this example:
{
"name": {
"title": "mr",
"first": "something",
"last": "something"
},
"role": "something",
"projects": {
"0": {
"title": "something",
"account": "something",
"steps": {
"total": 30,
"completed": 28
},
"dueDate": "2021-07-19 09:00:00",
"status": "fine"
},
"1": {
"title": "something",
"account": "something",
"steps": {
"total": 10,
"completed": 5
},
"dueDate": "2021-07-20 09:00:00",
"status": "fine"
}
}
}
The challenge lies in displaying all projects within the HTML from the projects field. Currently, I have initialized a person variable as an empty array and added all subscription fields to it. To address this, I planned to create a separate variable like projects: any = []; and assign it to a new field in the person variable. Then, iterate through it using *ngFor and display each project individually. Something similar to this:
<li *ngFor="let project of person.projects">
{{ project }}
</li>
However, even with this approach, I am still unable to access the nested fields. How can I access these numbered objects and navigate through all nested fields effectively?
Any guidance or suggestions would be greatly appreciated. Thank you in advance.