DEV Community

Abel Lifaefi Mbula
Abel Lifaefi Mbula

Posted on

Angular: unable to display data in the view

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?

Discussion (4)

Collapse
bam92 profile image
Abel Lifaefi Mbula Author • Edited on

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.

Collapse
bam92 profile image
Abel Lifaefi Mbula Author

I have already resolved my issue.

Thank you!

Collapse
katnel20 profile image
Katie Nelson • Edited on

Which properties have you defined?
Your request returns JSON and you can see that. What are you looking for? Stringify or parse?

Collapse
adityathebe profile image
Aditya Thebe

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

Which property are you trying to access ?