CODEWITHSUNDEEP
arraysjsonangulartypescriptobject
Remus
Remus

Reputation: 5

I can't display data in Angular [object Object] Error

I am getting this error

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I am using a JSON response and want to display the name, coord, temp, temp_min, temp_max, wind speedit in the UI. In the code I try to display the name at least.

Json

{"cod":"200","calctime":0.3107,"cnt":15,"list":[{"id":2208791,"name":"Yafran","coord":{"lon":12.52859,"lat":32.06329},"main":{"temp":9.68,"temp_min":9.681,"temp_max":9.681,"pressure":961.02,"sea_level":1036.82,"grnd_level":961.02,"humidity":85},"dt":1485784982,"wind":{"speed":3.96,"deg":356.5},"rain":{"3h":0.255},"clouds":{"all":88},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}]},{"id":2208425,"name":"Zuwarah","coord":{"lon":12.08199,"lat":32.931198},"main":{"temp":15.36,"temp_min":15.356,"temp_max":15.356,"pressure":1036.81,"sea_level":1037.79,"grnd_level":1036.81,"humidity":89},"dt":1485784982,"wind":{"speed":5.46,"deg":30.0002},"clouds":{"all":56},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}]},{"id":2212771,"name":"Sabratah","coord":{"lon":12.48845,"lat":32.79335},"main":{"temp":15.31,"temp_min":15.306,"temp_max":15.306,"pressure":1037.05,"sea_level":1037.55,"grnd_level":1037.05,"humidity":100},"dt":1485784982,"wind":{"speed":6.71,"deg":28.5002},"clouds":{"all":92},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}]},{"id":2217362,"name":"Gharyan","coord":{"lon":13.02028,"lat":32.172218},"main":{"temp":11.23,"temp_min":11.231,"temp_max":11.231,"pressure":1004.23,"sea_level":1037.06,"grnd_level":1004.23,"humidity":90},"dt":1485784982,"wind":{"speed":3.86,"deg":16.5002},"rain":{"3h":1.29},"clouds":{"all":92},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}]},{"id":2216885,"name":"Zawiya","coord":{"lon":12.72778,"lat":32.75222},"main":{"temp":17,"pressure":1024,"humidity":55,"temp_min":17,"temp_max":17},"dt":1485784982,"wind":{"speed":3.6,"deg":10},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]},{"id":2210247,"name":"Tripoli","coord":{"lon":13.18746,"lat":32.875191},"main":{"temp":16,"pressure":1025,"humidity":59,"temp_min":16,"temp_max":16},"dt":1485781822,"wind":{"speed":3.6,"deg":360},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]},{"id":2210221,"name":"Tarhuna","coord":{"lon":13.6332,"lat":32.43502},"main":{"temp":17,"pressure":1024,"humidity":55,"temp_min":17,"temp_max":17},"dt":1485784982,"wind":{"speed":3.6,"deg":10},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]},{"id":2215163,"name":"Masallatah","coord":{"lon":14,"lat":32.616669},"main":{"temp":12.86,"temp_min":12.856,"temp_max":12.856,"pressure":1000.17,"sea_level":1036.49,"grnd_level":1000.17,"humidity":73},"dt":1485784982,"wind":{"speed":4.81,"deg":16.5002},"rain":{"3h":0.39},"clouds":{"all":88},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}]},{"id":2219905,"name":"Al Khums","coord":{"lon":14.26191,"lat":32.648609},"main":{"temp":15.18,"temp_min":15.181,"temp_max":15.181,"pressure":1023.35,"sea_level":1036.01,"grnd_level":1023.35,"humidity":73},"dt":1485784982,"wind":{"speed":5.26,"deg":26.0002},"clouds":{"all":88},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}]},{"id":2208485,"name":"Zlitan","coord":{"lon":14.56874,"lat":32.467381},"main":{"temp":15.18,"temp_min":15.181,"temp_max":15.181,"pressure":1023.35,"sea_level":1036.01,"grnd_level":1023.35,"humidity":73},"dt":1485784982,"wind":{"speed":5.26,"deg":26.0002},"clouds":{"all":88},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}]},{"id":2563191,"name":"Birkirkara","coord":{"lon":14.46111,"lat":35.897221},"main":{"temp":14,"pressure":1023,"humidity":62,"temp_min":14,"temp_max":14},"dt":1485784991,"wind":{"speed":4.1,"deg":10,"var_beg":330,"var_end":30},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]},{"id":2523650,"name":"Ragusa","coord":{"lon":14.71719,"lat":36.928242},"main":{"temp":14.54,"pressure":1022,"humidity":50,"temp_min":13,"temp_max":16},"dt":1485781816,"wind":{"speed":3.1,"deg":20,"var_beg":350,"var_end":60},"clouds":{"all":20},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}]},{"id":2523693,"name":"Pozzallo","coord":{"lon":14.84989,"lat":36.730541},"main":{"temp":14,"pressure":1022,"humidity":50,"temp_min":14,"temp_max":14},"dt":1485781816,"wind":{"speed":3.1,"deg":20,"var_beg":350,"var_end":60},"clouds":{"all":20},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}]},{"id":2524119,"name":"Modica","coord":{"lon":14.77399,"lat":36.84594},"main":{"temp":15.74,"pressure":1022,"humidity":47,"temp_min":14,"temp_max":17},"dt":1485785168,"wind":{"speed":2.1,"deg":0},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]},{"id":2523581,"name":"Rosolini","coord":{"lon":14.94779,"lat":36.824242},"main":{"temp":15.62,"pressure":1022,"humidity":47,"temp_min":14,"temp_max":17},"dt":1485784979,"wind":{"speed":2.1,"deg":0},"clouds":{"all":40},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}]}]}

api.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  url = "https://samples.openweathermap.org/data/2.5/box/city?bbox=12,32,15,37,10&appid=b6907d289e10d714a6e88b30761fae22"
  constructor(private http:HttpClient) { }
  getApi() {
    return this.http.get(this.url);
  }
}

app.component.ts

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';
  public data: any = [ ];

  constructor(private _http:ApiService){}
  ngOnInit(){
    return this._http.getApi().subscribe(data => this.data = data);
  }
}

app.component.html

<ul *ngFor="let info of data">
  <li>Name: {{ info.list.name }}</li>
 </ul>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Error

Upvotes: 0

Views: 543

Answers (2)

Ismail Dinar
Ismail Dinar

Reputation: 426

Make sure to iterate over data.list, not data.

Here is a version of your code that works stackblitz

Upvotes: 1

Nicholas K
Nicholas K

Reputation: 15423

You need to iterate over the list property of data, since data is an object and data.list is the actual iterable.

<ul *ngFor="let info of data.list">
   
   <li>{{info.name}}</li>
   ...

</ul>

Upvotes: 1

Related Questions