Uncaught (in promise) TypeError: cannot read property '0' of undefined

Ionic Framework ionic-v3
1

Hello i am trying to access the values of a JSON. I need to fill the array items with the result of getDataProductosInfinite(). I know that productosInfinite has all the values, but when i try to access to the first value this.items.push( this.productosInfinite[0] ) it says "uncaught (in promise)… " How can i solve this?

Thanks!

My home.html:
<ion-content>
<ion-list> <ion-item *ngFor=“let i of items”>{{i}}</ion-item> </ion-list> <ion-infinite-scroll (ionInfinite)=“doInfinite($event)”> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll>
</ion-content>

My home.ts:

import { Component } from ‘@angular/core’;
import { NavController, Slides} from ‘ionic-angular’;
import { Http } from ‘@angular/http’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
productosInfinite:any;
items = ;

constructor(public navCtrl: NavController, public http: Http) {
for (let i = 0; i < 30; i++) {
this.items.push( this.productosInfinite[0] );
}
}

ionViewDidLoad(){
this.getDataProductosInfinite();
}

getDataProductosInfinite(){
this.http.get(“URL where i get the JSON”).subscribe( data => {
this.productosInfinite = JSON.parse(data["_body"]);
}, err =>{
console.log(err);
});
}

doInfinite(infiniteScroll) {
setTimeout(() => {
for (let i = 0; i < 30; i++) {
this.items.push(this.productosInfinite[0]);
}

  infiniteScroll.complete();
}, 500);

}
}

The JSON I get
[{“productoTitulo”:“Bacardi Mojito”,“productoPrecioHoy”:“80”,“imagenArchivo”:“producto1.jpg”},{“productoTitulo”:“Cinderella”,“productoPrecioHoy”:“100”,“imagenArchivo”:“producto2.jpg”},{“productoTitulo”:“Orange Spritz”,“productoPrecioHoy”:“110”,“imagenArchivo”:“producto3.jpg”},{“productoTitulo”:“American Breakfast”,“productoPrecioHoy”:“210”,“imagenArchivo”:“producto4.jpg”},{“productoTitulo”:“Johnny B. Good Special”,“productoPrecioHoy”:“200”,“imagenArchivo”:“producto5.jpg”},{“productoTitulo”:“Countryside Breakfast”,“productoPrecioHoy”:“230”,“imagenArchivo”:“producto6.jpg”},{“productoTitulo”:“BBQ Ribs”,“productoPrecioHoy”:“100”,“imagenArchivo”:“producto7.jpg”},{“productoTitulo”:“Rib Eye Stick”,“productoPrecioHoy”:“180”,“imagenArchivo”:“producto8.jpg”},{“productoTitulo”:“Mac And Cheese”,“productoPrecioHoy”:“130”,“imagenArchivo”:“producto9.jpg”},{“productoTitulo”:“Caesars Salad”,“productoPrecioHoy”:“180”,“imagenArchivo”:“producto10.jpg”},{“productoTitulo”:“Top Hip Combo”,“productoPrecioHoy”:“140”,“imagenArchivo”:“producto11.jpg”}]

2

Hello,

maybe productosInfinite:any; isn’t an array nor is it initialized.

Try productosInfinite:any[] = [];

Best regrads, anna-liebt

3

Thnk you Anna. The error changed. It says cannot property ‘productoTitulo’ of undefined. It returns [object, object] and i am trying to access like this

{{i.productoTitulo}}
4

Hello,
your code you showed does not contain {{i.productoTitulo}}.

Bytheway, this error means you call productoTitulo on something that not exist or at that time you call it exist. Take care that someting is available at that time you call it.

Berst REgards, anna-liebt

5

use this way in your dom as dom initialize before your subscriber
{{i?.productoTitulo}}

6

Hello Anna, i printed in console and prints “Bacardi Mojito” which is the first productoTitulo, but it doesn’t work when i try to print from the html

getDataProductosInfinite(){
this.http.get(“http://www.brithers.com/ionic/appindividual/json4.php”).subscribe( data => {
this.productosInfinite = JSON.parse(data["_body"]);
console.log(this.productosInfinite[0].productoTitulo);
}, err =>{
console.log(err);
});
}

When i try to do the same in the construtor it fails (console.log(this.productosInfinite[0].productoTitulo)).

7

Hello,

maybe, at the time when constructor is called, productosinfiniite is not initialized or has no entry at position 0.

Check that your json.parse return something useful.

Promises, sunscribe, observable…hmm at that I am really bad, because js and web stuff is not my thing, my bad.
Maybe the scope is changing, so this is on a different scope, but you have used fat arrow that should exactly prevent this. So anybody else has better knowledge on this.

Maybe you can use old fashend let that = this before and use inside that instead of this, but I hope somebody could explain in simple words, what is going wrong here.

Also check that your json.parse return something useful.

Best regards, anna.liebt

8

If you edit posts, try to do so in a way that doesn’t make the ensuing conversation completely unintelligible, as has happened here.

@anna_liebt is on the right track here. You must get into your head that the timing of future resolution (Promise.then, Observable.subscribe) has absolutely nothing to do with the point of its definition.

let a = "gotcha";
this.http.get<string>(url).subscribe(got => a = "saved");
console.log(a);

…theoretically can print “saved” (especially in a testing environment, which can be insidious) but in a real-world application, will print “gotcha” every time.

So, (again as @anna_liebt suggested), initialize every property that is referenced from a template to something sane - at a minimum, [] for arrays and {} for objects.

1 Like