Runtime Error cannot read property data of undefined

Ionic Framework ionic-v3
1

Hello guys, please i need someone to help me, i am new to ionic and i am using ionic 3.7.0. I am writitng a program that accept data from an API it working perfectly. now i have added a button such that when ever you click on it you will be taken to new screen. i created a method and use with push(). now the pronblem is that it is showing this error:

Runtime Error cannot read property data of undefined.

Please can any put me through thanks.

on my .ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {RecipeProvider} from '../../providers/recipe/recipe';
import {detailsPage} from '../details/details';

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

  constructor(public navCtrl: NavController, private recipeService:RecipeProvider) {
    this.getRecipeFromProvider();
  }
  getRecipeFromProvider(){
    this.recipeService.getRecipes().subscribe((data)=>{
      this.recipeList=data.results;
    });
  }
  viewItem(item){
    this.navCtrl.push(detailsPage);
    

    

  }

}

.html file

<ion-header>
  <ion-navbar>
    <ion-title>
      Welcome to Super Recipe
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
  <ion-item *ngFor = "let recipe of recipeList">
    <ion-thumbnail item-start>
      <img [src]="recipe.thumbnail">
    </ion-thumbnail>
    <h2>{{recipe.title}}</h2>
    <p>Ingredients:{{recipe.ingredients}}</p>
    <button ion-button clear item-right color="twitter" (click) ="viewItem(item.data)">View</button>
    </ion-item>
  
</ion-list>
 
</ion-content>
2

Post:

  • the code you have, completely enough that somebody can reproduce your issue
  • what happens
  • what you expected to happen
  • how those are different
1 Like
3

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

Ionic 3.7.0 has to be the CLI version which is quite irrelevant - please change your title to describe the problem you have and want to solve (“Runtime Error cannot read property data of undefined.”).

Also post your ionic info output please.

1 Like
4

Thank you for your suggestions. I have done that now.

5

Read the error message. It tells you exactly what is wrong. You are attempting to access the property “data” of an undefined entity. The only place I see “data” is in viewItem(item.data) and, sure enough, I see neither a template variable nor a controller property named item. Incidentally, both “item” and “data” are generally not very good names; choose something more descriptive and your code will be more readable and maintainable.

1 Like