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!

user4676340 · Accepted Answer · 2017-12-12 12:41:56Z

2

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] }}

answered Dec 12, 2017 at 12:41

user4676340

Sign up to request clarification or add additional context in comments.

Comments

Sathyamoorthy Ponnusamy · Accepted Answer · 2017-12-12 12:43:58Z

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.

answered Dec 12, 2017 at 12:43

Sathyamoorthy Ponnusamy

1611 gold badge2 silver badges10 bronze badges

Comments

Wesley Coetzee · Accepted Answer · 2017-12-12 12:42:29Z

1

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.

edited Dec 12, 2017 at 12:42

answered Dec 12, 2017 at 12:31

Wesley Coetzee

4,8483 gold badges30 silver badges48 bronze badges

3 Comments

breezertwo Over a year ago

maybe i seem like an idot but this is what i get now: "TypeError: res.json is not a function"

user4676340 Over a year ago

It's because you already use HttpClient, which makes the json() call automatically

Hugo Noro Over a year ago

Using the HttpClient the response is a json by default. The suggested solution is no longer needed

user4676340 · Accepted Answer · 2017-12-12 12:34:28Z

1

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">

answered Dec 12, 2017 at 12:34

user4676340

2 Comments

breezertwo Over a year ago

HttpClient is already in use. " your issue is that you don't parse your response to data" maybe you can tell me more about this :)

user4676340 Over a year ago

I'm sorry, I didn't see your real issue, my bad. See my other answer :)

j2L4e · Accepted Answer · 2017-12-12 12:42:50Z

1

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

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

answered Dec 12, 2017 at 12:42

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

Collectives™ on Stack Overflow

Display JSON with ngFor-Loop (Angular)

5 Answers 5

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related