Display JSON with ngFor-Loop (Angular)

Question

I hope you people can help me. Our plan is to show data saved in a .json file with a ngFor loop.

With my code so far I always get stuck with following error:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I've researched and know that I have to use Pipes to fix it. But i have no clue how it works as I'm quite new to Angular.

This is how I load the JSON and asign it to the temp variable:

ngOnInit(): void {
    this.http.get('assets/tempdata.json').subscribe(data => {
       //console.log(data);
       this.temps = data;
    });
}

And here the part of the .html file i want to show it:

<mat-card-content>
          <mat-list>
            <mat-list-item *ngFor="let temp of temps">
              <i class="{{temp.icon}}"></i><p>{{temp.temp}}{{temp.room}}</p>
            </mat-list-item>
          </mat-list>
</mat-card-content>

And this is the .JSON File I want to display:

{
  "temperature": [
      {
        "temp": "4°",
        "room": " Outside",
        "icon": 4
      },
      {
        "temp": "21°",
        "room": " Livingroom",
        "icon": 21
      },
      {
        "temp": "24°",
        "room": " Bedroom",
        "icon": 24
      },
      {
        "temp": "11°",
        "room": " Basement",
        "icon": 11
      }
  ]
}

It would be awesome if anybody could help me with this. Any hint or more is helpful. Thanks a lot!

Answer 1

ngFor iterates over tables, not objects. The error tells you so.

Your JSON is an object (it starts with {, not with [).

If you want to iterate over it, you either have to change it to an array, or you have to iterate on the keys. To do that :

this.keys = Object.keys(data);

In your HTML :

<mat-list-item *ngFor="let key of keys">

And you will acces your data with

{{ temps[key] }}

Answer 2

ngOnInit(): void {
    this.http.get('assets/tempdata.json').subscribe(data => {
       //console.log(data);
       this.temps = data.temperature;
    });
}

here the input json is nested object and your list lies in temperature property.. so change the code as above.

Answer 3

OLD HTTP

You would need the .map()

ngOnInit(): void {
    this.http.get('assets/tempdata.json')
        .map((res: Response) => res.json())
        .subscribe(data => {
           //console.log(data);
           this.temps = data;
    });
}

HTTP CLIENT

You would need the <any> after the get

ngOnInit(): void {
    this.http.get<any>('assets/tempdata.json')
        .subscribe(data => {
           //console.log(data);
           this.temps = data;
    });
}

Also in your html, you should be looping over temps.temperature, according to your object

<mat-list-item *ngFor="let temp of temps.temperature">

Alternatively, you could do this.temps = data.temperature.

Answer 4

You can use the HttpClient instead of Http.

Because Http will be deprecated soon, I even highly advise you to do so.

Simply do

import { HttpClient } from '@angular/common/http';

Instead of

import { Http } from '@angular/http';

and in your constructor,

constructor(private http: HttpClient) {}

(In case you are wondering, your issue is that you don't parse your response to data)

Oh and by the way, your *ngFor should have the async pipe :

<mat-list-item *ngFor="let temp of temps | async">

Answer 5

you're iterating over an object, ngFor is for arrays.

use <mat-list-item *ngFor="let temp of temps.temperature">