Can't read the property "name" of undefined

Ionic Framework ionic-v3
1

Haiii. I am the new one to ionic as well as angular. For practice, I am developing an ionic3 app. My app contains a service page “countries.service.ts” which reads countries details in the form of JSON from the URL using HTTP. And my home page get the data from the “CountriesService”. But i am getting the error “Can’t read property ‘name’ of undefined”…
In home.html I am trying to read the values like this.:
{{countryObj.name}}
{{countryObj.capital}}
home.ts
public countryObj:any;
ngOnInit(){
this.countriesService.getCountryDetail().subscribe(res => this.countryObj= res.json()[0]);
}
coountries.service.ts
public getCountryDetail(){
let url:string=‘https://restcountries.eu/rest/v2/name/india?fullText=true1’;
return this.http.get(url);
}
Any help will be appriciated.
Thanks in advance…

2

The following line:
this.countriesService.getCountryDetail().subscribe(res => this.countryObj= res.json()[0]);

Is likely to be executed after your template is rendered, and so countryObj will be undefined. You should at least initialize it to be any empty object, or to some sensible defaults.
E.g. public countryObj = {};

1 Like
3

Thank you @SigmundFroyd for your suggestion… It is working Now. Thank u a lot.
I used like this and problem solved…

public countryObj={name:'',capital:''};