Ionic 3 array and undefined

Question

I've got a serious problem with this function in Ionic, I'm trying to fix this for several days but with no success. I'm developing an app "like Instagram". I upload the photo on Firebase and also the link to download it, but when I try to display the photos in the home via links I receive only Cannot read property of 'arrayname' of undefined, even if when I try to console.log(maledettiurl) or console.log(childData.url) I get in the console all the links with the last element undefined.

This is my function, please help me :(

import { Component, NgZone } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { FabContainer } from 'ionic-angular';
import firebase from 'firebase';

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

  captureDataUrl: string;
  alertCtrl: AlertController;
  imgsource: any;
  firestore = firebase.storage();
  itemRef : firebase.database.Reference = 
firebase.database().ref('/matrimonio1');
  checklists: any[];

constructor(private camera: Camera, public navCtrl: NavController, 
alertCtrl: AlertController, public zone: NgZone, public navParams: 
NavParams) {
  this.alertCtrl = alertCtrl;
}

...

ionViewDidLoad(){
    const query = this.itemRef;
    query.once("value")
    .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var childData = childSnapshot.val();
          var childData = childSnapshot.val();
          var maledettiurl = childData.url;
          this.checklists.push({url:maledettiurl});
          this.checklists.splice(-1,1);
        });
      });
    }

home.html

 <ion-header>
  <ion-navbar color="primary">
    <ion-title align="center">
      Wedding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let item of checklist">{{item}}</ion-item>
  </ion-list>

<ion-fab bottom right #fab>
   <button ion-fab><ion-icon name="add"></ion-icon></button>
   <ion-fab-list side="top">
     <button ion-fab (click)="capture($event, fab)"><ion-icon-name="camera"></ion-icon></button>
 <button ion-fab (click)="album($event, fab)"><ion-icon name="albums"></ion-icon></button>
   </ion-fab-list>
 </ion-fab>

</ion-content>

Thanks everybody

[edit] the question with the code..let me know if the dupe is the same issue — Suraj Rao, Jan 17 '18 at 11:40
where exactly are you accessing `arrayname` here? are you sure your issue exists here? — Suraj Rao, Jan 17 '18 at 12:09
https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 — Suraj Rao, Jan 17 '18 at 12:27
use arrow function instead of `function(snapshot` and `function(childSnapshot` — Suraj Rao, Jan 17 '18 at 12:27
Using arrow function ionViewDidLoad(){ const query = this.itemRef; query.once("value") .then((snapshot) => { snapshot.forEach((childSnapshot) => { var childData = childSnapshot.val(); var maledettiurl = childData.url; this.checklists.push({url:maledettiurl}); this.checklists.splice(-1,1); }); }); } and in home.html {{url}} doesn't say error but in inspector i only can see — Marco Palmisano, Jan 17 '18 at 16:37
Some of you have any ideas? I'm still fighting to make it work.. — Marco Palmisano, Jan 19 '18 at 16:48

Ionic 3 array and undefined

0 Answers0