How can I iterate over nested objects using ngFor in Angular HTML?

Question

How can I iterate over nested objects using ngFor in Angular HTML?

We have a data object stored on our server structured like this;

{
    "NFL": {
        "link": "https://www.nfl.com/",
        "ticketPrice": 75
    },
    "MLB": {
        "link": "https://www.mlb.com/",
        "ticketPrice": 60
    },
    "NHL": {
        "link": "https://www.nhl.com/",
        "ticketPrice": 55
    },
    "MLS": {
        "link": "https://www.mlssoccer.com/",
        "ticketPrice": 45
    }
}

To access this object, I have subscribed to it using the following code;

sportsObject : Sports[] //THIS IS THE MEMBER THAT SHOULD BE FILLED WITH THE JSON OBJECT GIVEN
object = Object;
ngOnInit(){
    this.SportsService.getPrices().subscribe(data=>{
      this.sportsObject = data;
    })    
}

Below is my html code for displaying the data;

   <div *ngFor="let key of Object.keys(sportsObject)">
       <p>The {{key}} is {{{{sportsObject[key]}}</p>
   </div>

However, I am encountering the error message, "Cannot find a differ supporting object '[object Object]' of type 'object'." How can I rectify this issue and successfully iterate through this JSON object?

json angular typescript

Answer 1

Answer №1

*ngFor directive typically works with arrays. However, for iterating over objects, you can utilize the keyvalue pipe (Angular v6.1.0+). Give this code snippet a try:

<div *ngFor="let sport of sportsObject | keyvalue">
  <p>The {{ sport.key }} is {{ sport.value.ticketPrice }}</p>
  <p>More Info: <a [attr.href]="sport.value.link">{{ sport.value.link }}</a></p>
</div>

Additionally, it's recommended to avoid invoking functions in directive bindings ([dir]="someFunc()" and *dir="someFunc()") as well as interpolations ({{ someFunc() }}). This practice can help prevent performance issues, especially if you don't have control over the change detection strategy.

Answer 2

*ngFor directive typically works with arrays. However, for iterating over objects, you can utilize the keyvalue pipe (Angular v6.1.0+). Give this code snippet a try:

<div *ngFor="let sport of sportsObject | keyvalue">
  <p>The {{ sport.key }} is {{ sport.value.ticketPrice }}</p>
  <p>More Info: <a [attr.href]="sport.value.link">{{ sport.value.link }}</a></p>
</div>

Additionally, it's recommended to avoid invoking functions in directive bindings ([dir]="someFunc()" and *dir="someFunc()") as well as interpolations ({{ someFunc() }}). This practice can help prevent performance issues, especially if you don't have control over the change detection strategy.

Answer 3

Answer №2

Store keys as an array in your TypeScript file

this.sportsObject = data;
this.keys= Object.keys(data);

Then, in your HTML template, directly utilize this array

<div *ngFor="let key of keys">
    <p>Key is: {{ key }}</p>
    <p>{{ sportsObject[key].link }}</p>
    <p>{{ sportsObject[key].ticketPrice }}</p>
</div>

Answer 4

Store keys as an array in your TypeScript file

this.sportsObject = data;
this.keys= Object.keys(data);

Then, in your HTML template, directly utilize this array

<div *ngFor="let key of keys">
    <p>Key is: {{ key }}</p>
    <p>{{ sportsObject[key].link }}</p>
    <p>{{ sportsObject[key].ticketPrice }}</p>
</div>

Answer 5

Answer №3

To utilize the `keyvalue` pipe, simply include it in your code. Additionally, I suggest using the `async` pipe instead of directly assigning data from the API to the `sportsObject`. Your code could resemble the following:

TS:

sports$: Observable<Sports>;    

ngOnInit(){
  this.sports$ = this.SportsService.getPrices();
}

HTML:

<div *ngFor="let sport of (sports$ | async) | keyvalue">
   <p>The {{sport.key}} is {{sport.value}}</p>
</div>

Answer 6

To utilize the `keyvalue` pipe, simply include it in your code. Additionally, I suggest using the `async` pipe instead of directly assigning data from the API to the `sportsObject`. Your code could resemble the following:

TS:

sports$: Observable<Sports>;    

ngOnInit(){
  this.sports$ = this.SportsService.getPrices();
}

HTML:

<div *ngFor="let sport of (sports$ | async) | keyvalue">
   <p>The {{sport.key}} is {{sport.value}}</p>
</div>

How can I iterate over nested objects using ngFor in Angular HTML?

Answer №1

Answer №2

Answer №3

Similar questions

How to locate a specific object by its ID within a JSON structure embedded in an HTML template

Tips for connecting to a docker container containing an Angular application while the Angular app is also running in its own container

Troubleshooting mat-accordion title problem on mobile devices

Currently in the process of optimizing controllers but continuously encountering 404 errors when making api requests

Extract nested values within objects and arrays, and return the complete type of the original object

How to make a node application run as an executable within an NX workspace

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

RestSharp request encountered HTTP Error 406 during execution

Unexpected Typescript error when React component receives props

Clearing Out a Shopping Cart in Angular

When I define a type in TypeScript, it displays "any" instead

A warning has been issued: CommonsChunkPlugin will now only accept one argument

"Uploading user profile images with Angular, Express, Multer, and Mongoose made easy

PHP: Convert a complex JSON into a CSV format

I need help differentiating "namespace" from "static attributes" in TypeScript

Exploring the power of Vue3 with reactive nested objects and the inclusion of

How to apply CSS classes to dynamically injected HTML in Angular 7

Personalize JSON Output

How can you create a function in typescript that only allows parameters of a specific type?

Submitting a nested JSON body in ASP MVC