Angular: unable to display data in the view

#help #angular

Hi!

I am a bit stuck with Angular HttpClient.

I am fetching data from an API via a service.

//my service
export class CoronaService {

  constructor(
    private http: HttpClient
  ) { }

  getAll() {
    return this.http
      .get('https://covid19.mathdro.id/api')     
  }
}

My component looks like this

export class AppComponent implements OnInit {

  corona = [];

  constructor(
    private coronaService: CoronaService
  ) {}

  ngOnInit() {
    this.coronaService.getAll().subscribe((response: any[]) => {

      this.corona = response;

    }, err => {
      console.log('Error', err);

    });
  }

}

My view where the problem is

<p> {{ corona }} </p>

I get this as out[object Object]

If I do this

<p> {{ corona | json }} </p>

I get the json data.

If I try to access a property I get an error cannot get property x of undefined.

I tried to figure out but in vain. Can you tell me where error is?

Top comments (4)

Abel Lifaefi Mbula • Mar 23 '20 • Edited

Hi @aditya Thebe, Katie Nelson,

If you go to the API you'll have this

confirmed: {value: 328275, detail: "https://covid19.mathdro.id/api/confirmed"}
countries: "https://covid19.mathdro.id/api/countries"
countryDetail: {pattern: "https://covid19.mathdro.id/api/countries/[country]", example: "https://covid19.mathdro.id/api/countries/USA"}
dailySummary: "https://covid19.mathdro.id/api/daily"
dailyTimeSeries: {pattern: "https://covid19.mathdro.id/api/daily/[dateString]", example: "https://covid19.mathdro.id/api/daily/2-14-2020"}
deaths: {value: 14366, detail: "https://covid19.mathdro.id/api/deaths"}
image: "https://covid19.mathdro.id/api/og"
lastUpdate: "2020-03-22T18:13:55.000Z"
recovered: {value: 95656, detail: "https://covid19.mathdro.id/api/recovered"}
source: "https://github.com/mathdroid/covid19"

I want to display confirmed, deaths, revovered values.