Cannot read property 'country_name' of undefined

Ionic Framework ionic-v3
21

ok ok
now write code this way

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

22 
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)
23

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

24

But it is not displaying data in the screen

10 PM
Screen Shot 2017-10-25 at 12.44.10 PM.png1100×650 145 KB

25

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

26

Jesus Christ guys… :joy: 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:
<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

<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}}
27

try this in html =>
{{countries[“country_name”]}}

28

Its printing in the console

29

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

30

home.html

<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

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
Screen Shot 2017-10-25 at 12.52.14 PM.png1131×647 146 KB

its is printing output in console

31

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

32

try single quote in {{countries[‘country_name’]}}

33

All of these are practically the same in this scenario

  • {{countries.country_name}}
  • {{countries[“country_name”]}}
  • {{countries[‘country_name’]}}
34

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

35

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 :wink:

36

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

1 Like