Json Array Cannot find a differ supporting object

Question

l am try to get weather data json for wunderground api using ionic 4 . When l try to run this code l got error ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

short json response

{
  "hourly_forecast": [
    {
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    }
  ]
}

code

weather : any 

constructor(private https: HttpClient) {


  this.https.get('xxxxxxxxxxxx/q/muscat.json')
  .subscribe(data => {

    this.weather= data
    console.log(this.weather)

  })

}

html

   <tr  *ngFor="let item of weather">

        <td>{{item.hourly_forecast.condition}}</td>
      </tr>

any idea please ?

You can try something like this: *ngFor="let item of weather.hourly_forecast" and <td>{{item.condition}}</td> — yer
– yer, Commented Mar 6, 2019 at 14:43

GaryB · Accepted Answer · 2019-03-06 14:50:45Z

3

 <tr  *ngFor="let item of weather.hourly_forecast.condition">
    <td>{{item}}</td>
 </tr>

This one will work

edited Mar 6, 2019 at 14:50

answered Mar 6, 2019 at 14:33

GaryB

3841 silver badge9 bronze badges

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

2 Comments

Ali Ghassan Over a year ago

check out jsoneditoronline.org/?id=aa8b74650bf34bfda07d68ebb7180e62

GaryB Over a year ago

*ngFor="let item of weather.hourly_forecast.condition" 'cause this is the array so you can loop thru that

Roberto Zvjerković · Accepted Answer · 2019-03-06 14:52:43Z

2

Your data is an object, not an array. Array is wrapped in .hourly_forecast field of the object:

<tr *ngFor="let item of weather?.hourly_forecast">
    <td>{{item.condition}}</td>
</tr>

Make sure to add an ? so you don't get an error before the data arrives.

answered Mar 6, 2019 at 14:52

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Comments

Nishant Tamilselvan · Accepted Answer · 2019-03-06 15:38:28Z

Here is the sample code which works!.

var json = {
  "hourly_forecast": [{
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    },
    {
      "condition": "غائم جزئياً",
      "icon": "partlycloudy",
      "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
      "fctcode": "2",
      "sky": "30"
    }
  ],
  "hourly_forecast2": [{
    "condition": "غائم جزئياً",
    "icon": "partlycloudy",
    "icon_url": "http://icons.wxug.com/i/c/k/partlycloudy.gif",
    "fctcode": "2",
    "sky": "30"
  }]
}

// If you want iterate inside

for (var element in json) {
  var data = json[element];
  for (var val in data) {
    console.log(data[val].condition)
  }
}

Or else check whether data has been imported correctly

this.https.get('xxxxxxxxxxxx/q/muscat.json')
 .subscribe(data => {
this.weather = data.hourly_forecast;
 });

Now it will work

<tr  *ngFor="let item of weather">
    <td>{{item.hourly_forecast.condition}}</td>
  </tr>

yer · Accepted Answer · 2019-03-06 14:57:56Z

0

NgFor can only be used on arrays. Try something like this:

*ngFor="let item of weather.hourly_forecast" and <td>{{item.condition}}</td>

answered Mar 6, 2019 at 14:57

yer

1,5322 gold badges19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Json Array Cannot find a differ supporting object

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related