Json Array Не удается найти другой вспомогательный объект

Я пытаюсь получить данные о погоде в формате json для wunderground API, используя ionic 4. Когда я пытаюсь запустить этот код, я получаю ошибку ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

короткий ответ json

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

код

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>

Любая идея, пожалуйста?


angular ionic4
person Ali Ghassan    schedule 06.03.2019    source источник
comment
Вы можете попробовать что-то вроде этого: *ngFor=let item of weather.hourly_forecast и ‹td›{{item.condition}}‹/td›   -  person yer    schedule 06.03.2019

Ответы (4)


arrow_upward
3
arrow_downward 

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

Этот будет работать

person GaryB    schedule 06.03.2019
comment
проверьте jsoneditoronline.org/?id=aa8b74650bf34bfda07d68ebb7180e62 - person Ali Ghassan; 06.03.2019
comment
* ngFor = пусть элемент Weather.hourly_forecast.condition 'потому что это массив, поэтому вы можете перебрать его - person GaryB; 06.03.2019

arrow_upward
2
arrow_downward

Ваши данные являются объектом, а не массивом. Массив обёрнут в .hourly_forecast поле объекта:

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

Не забудьте добавить ?, чтобы не получить ошибку до поступления данных.

person Roberto Zvjerković    schedule 06.03.2019

arrow_upward
1
arrow_downward

Вот пример кода, который работает!.

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

Либо проверьте, правильно ли были импортированы данные

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

Теперь это будет работать

<tr  *ngFor="let item of weather">
    <td>{{item.hourly_forecast.condition}}</td>
  </tr>
person Nishant Tamilselvan    schedule 06.03.2019

arrow_upward
0
arrow_downward

NgFor можно использовать только для массивов. Попробуйте что-то вроде этого:

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