# Cannot read property 'country\_name' of undefined

**URL:** <https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774>\
**Category:** ionic-v3\
**Created:** [October 24, 2017, 8:46am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774 "2017-10-24T08:46:53Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:05am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/21 "2017-10-25T07:05:55Z")

</div>

ok ok  
now write code this way

`this.country= JSON.parse(JSON.stringify(data);`

---

<div class="post-metadata">

**Author:** ![Prakashreddy](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@Prakashreddy](https://forum.ionicframework.com/u/Prakashreddy)\
**Post date:** [October 25, 2017, 7:10am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/22 "2017-10-25T07:10:13Z")

</div>

> [@hirenkorat3](#):
>
> JSON.parse(JSON.stringify(data);

```auto
compiler.es5.js:1694 Uncaught Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unexpected character [“] at column 1 in expression [“let] at column 2 in [“let] in ng:///AppModule/HomePage.html@9:14 ("

<ion-content padding>
    <ion-list [ERROR ->]*ngFor=“let countries of country”>
        <ion-item >
             <h2>{{country.country_name}}</h2>"): ng:///AppModule/HomePage.html@9:14
Parser Error: Lexer Error: Unexpected character [“] at column 1 in expression [“let] at column 2 in [“let] in ng:///AppModule/HomePage.html@9:14 ("

<ion-content padding>
    <ion-list [ERROR ->]*ngFor=“let countries of country”>
        <ion-item >
             <h2>{{country.country_name}}</h2>"): ng:///AppModule/HomePage.html@9:14
Parser Error: Unexpected token Lexer Error: Unexpected character [“] at column 1 in expression [“let] at column 2 in [“let] in ng:///AppModule/HomePage.html@9:14 ("
    <ion-list *ngFor=“let countries of country”>
        <ion-item >
             <h2>[ERROR ->]{{country.country_name}}</h2>
           </ion-item></ion-list>
    
"): ng:///AppModule/HomePage.html@11:17
Parser Error: Lexer Error: Unexpected character [“] at column 1 in expression [“let] at column 2 in [“let] in ng:///AppModule/HomePage.html@9:14 ("
    <ion-list *ngFor=“let countries of country”>
        <ion-item >
             <h2>[ERROR ->]{{country.country_name}}</h2>
           </ion-item></ion-list>
    
"): ng:///AppModule/HomePage.html@11:17
Can't bind to 'ngFor' since it isn't a known property of 'ion-list'.
1. If 'ion-list' is an Angular component and it has 'ngFor' input, then verify that it is part of this module.
2. If 'ion-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-content padding>
    <ion-list [ERROR ->]*ngFor=“let countries of country”>
        <ion-item >
             <h2>{{country.country_name}}</h2>"): ng:///AppModule/HomePage.html@9:14
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.parse (compiler.es5.js:12932)
    at JitCompiler._compileTemplate (compiler.es5.js:27126)
    at compiler.es5.js:27045
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.es5.js:27045)
    at compiler.es5.js:26932
    at Object.then (compiler.es5.js:1683)
    at JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.compileModuleAsync (compiler.es5.js:26860)

```

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:13am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/23 "2017-10-25T07:13:19Z")

</div>

this is syntax error bro  
you have write double quotation mark in ngFor =\> " "

---

<div class="post-metadata">

**Author:** ![Prakashreddy](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@Prakashreddy](https://forum.ionicframework.com/u/Prakashreddy)\
**Post date:** [October 25, 2017, 7:13am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/24 "2017-10-25T07:13:56Z")

</div>

But it is not displaying data in the screen

 ![10 PM](https://global.discourse-cdn.com/ionicframework/original/3X/c/c/ccde5d7bade2cb8e13a76d78a33a70a809379641.png)

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:15am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/25 "2017-10-25T07:15:04Z")

</div>

try to print data of this.country in console  
and tell me what is output ?

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [October 25, 2017, 7:15am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/26 "2017-10-25T07:15:10Z")

</div>

Jesus Christ guys… 😂 Okay, everything I’ll be saying is in regard to the first post in here …

1. `data: any = {};` should be `data: Object[] = [];`
2. You should really indent the html properly, and the issue stands out quite clearly:

```auto
<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let countries of country">
        </ion-item>
    </ion-list>
    <h2>{{countries.country_name}}</h2>
</ion-content>

```

The `h2` is outside of the `*ngFor`

```auto
<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let countries of country">
            <h2>{{countries.country_name}}</h2>
        </ion-item>
    </ion-list>
</ion-content>

```

1. `let countries of country` should be `let country of data`
2. `{{countries.country_name}}` =\> `{{country.country_name}}`

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:17am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/27 "2017-10-25T07:17:46Z")

</div>

try this in html =\>  
{{countries[“country\_name”]}}

---

<div class="post-metadata">

**Author:** ![Prakashreddy](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@Prakashreddy](https://forum.ionicframework.com/u/Prakashreddy)\
**Post date:** [October 25, 2017, 7:18am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/28 "2017-10-25T07:18:14Z")

</div>

Its printing in the console

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:20am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/29 "2017-10-25T07:20:00Z")

</div>

write down {{countries[“country\_name”]}} insted of {{countries.country\_name}}  
and see the output

---

<div class="post-metadata">

**Author:** ![Prakashreddy](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@Prakashreddy](https://forum.ionicframework.com/u/Prakashreddy)\
**Post date:** [October 25, 2017, 7:22am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/30 "2017-10-25T07:22:58Z")

</div>

home.html

```auto
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
    <ion-list *ngFor="let countries of country">
        <ion-item >
             <h4>{{countries["country_name"]}}</h4>
           </ion-item></ion-list>
    
  </ion-content>

```

home.ts

```auto
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private apiurl = 'http://34.215.46.34/api.php?q=';
  country:any[]=[];
  data: any = [];

  constructor(public navCtrl: NavController, private http: Http) {
    console.log("Countries api");
    this.getcountry();
    this.getdata();
    
  }

  getdata(){
    return this.http.get(this.apiurl)
    .map((res: Response) => res.json())
  }
  getcountry(){
    this.getdata().subscribe(data =>{
      console.log(data);
      this.country=JSON.parse(JSON.stringify(data));
    })

  }

}

```

Output:

 ![14 PM](https://global.discourse-cdn.com/ionicframework/original/3X/9/b/9beba094dfc460522d2cad97a10b0a7825761537.png)

its is printing output in console

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [October 25, 2017, 7:24am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/31 "2017-10-25T07:24:19Z")

</div>

Hey man, go back to the code you had initially and read my response. It’s dead simple. 🙂

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:25am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/32 "2017-10-25T07:25:47Z")

</div>

try single quote in {{countries[‘country\_name’]}}

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [October 25, 2017, 7:26am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/33 "2017-10-25T07:26:40Z")

</div>

All of these are practically the same in this scenario

- {{countries.country\_name}}
- {{countries[“country\_name”]}}
- {{countries[‘country\_name’]}}

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [October 25, 2017, 7:27am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/34 "2017-10-25T07:27:24Z")

</div>

i know very well but there are something missing !!!

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [October 25, 2017, 7:28am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/35 "2017-10-25T07:28:20Z")

</div>

So this obviously isn’t it and the code has turned to a mess by now, the solution is very simple from the code provided in the initial post 😉

---

<div class="post-metadata">

**Author:** ![Prakashreddy](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@Prakashreddy](https://forum.ionicframework.com/u/Prakashreddy)\
**Post date:** [October 25, 2017, 7:56am UTC](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774/36 "2017-10-25T07:56:49Z")

</div>

Thanks for everyone for solving my problem. I just started to learn ionic thats why i had lot of douts.

[Previous page](https://forum.ionicframework.com/t/cannot-read-property-country-name-of-undefined/109774.md?page=1)