[Fixed] Displaying Nested Objects (Numeric) After Making Service Call

Issue

I’m currently having an issue accessing nested objects that are referred to through numbers. I made a service call to retrieve a JSON object, and then mapped each field to another object. I’ll be using this object to display each field in the HTML.

My problem is occurring when I reach the nested objects. Here’s an 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 projects field gets tricky when trying to display all projects in the HTML. At the moment, I’ve created a person variable initialized to an empty array, and I add all of the fields from t he subscription to it. To solve this problem, I figured I should create a separate variable such as projects: any = []; and then set it to a new field in the person variable. Then iterate through it using an *ngFor, and display every project. Something like this

<li *ngFor="let project of person.projects">
     {{ project }}
</li>

However that approach still doesn’t reach the nested fields. How do I access the numbered objects here, and generally iterate through all of the nested fields?

Any advice will be very helpful. Thank you in advance.

Solution

I think you are looking for the KeyValuePipe

You would use it like this:

<li *ngFor="let item of person.projects | keyvalue">
     {{ item.value }}
</li>

But based on your comment on doing this for more nested values, it might be worth flattening the data a bit in the component to simplify the template logic.