AngularFire2 - Ionic - Cannot read property of undefined

Question

The HTML is throwing an undefined error as if the data isn't retrieved. This is my service call to a Firebase list:

Service.ts

 getGames(eventId) {
    var ref =  this.afd.list('/game/', ref => ref.orderByChild('event').equalTo(eventId)).valueChanges();

    return ref;

}

My page.ts

currentEvent: any;
 gamesList: any[];
constructor(public navCtrl: NavController, public navParams: NavParams, public 
firebase: FirebaseProvider) {
 this.currentEvent = navParams.get('data');
 this.firebase.getGames(this.currentEvent).subscribe((val: any) => {
   val.forEach((e) => {

    console.log("date " + e.date);
  })

  this.gamesList = val;
})

}

In the foreach statement, i see the data correctly in the log. It throws an error on the html, even though it looks like the "gamesList" is populated.

page.html

 <ion-list>
  <ion-list-header>Games</ion-list-header>
   <ion-item ngFor="let g of gamesList">
     {{g.date}}
   </ion-item>
 </ion-list>

Full Error:

  Unhandled Promise rejection: Cannot read property 'date' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'date' of undefined
    at Object.eval [as updateRenderer] (LandetailPage.html:20)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callWithDebugContext (core.js:15098)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14635)
    at ViewRef_.detectChanges (core.js:11619)
    at NavControllerBase._viewAttachToDOM (nav-controller-base.js:460) TypeError: Cannot read property 'date' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/LandetailPage.ngfactory.js:66:27)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15277:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14391:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14737:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14669:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14392:5)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15640:42)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:15177:12)
    at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:12161:22)
    at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/vendor.js:54343:40)
n.onUnhandledError @ polyfills.js:3
r @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
t.then @ polyfills.js:3
NavControllerBase._nextTrns @ nav-controller-base.js:246
NavControllerBase._queueTrns @ nav-controller-base.js:185
NavControllerBase.push @ nav-controller-base.js:70
webpackJsonp.184.LanPage.goToLAN @ lan.ts:58
(anonymous) @ LanPage.html:22
handleEvent @ core.js:13589
callWithDebugContext @ core.js:15098
debugHandleEvent @ core.js:14685
dispatchEvent @ core.js:10004
(anonymous) @ core.js:10629
(anonymous) @ platform-browser.js:2628
globalListener @ platform-browser.js:3196

Thanks for the help!

Could you add the exact error message in the question?

Kzryzstof
– Kzryzstof

2018-09-21 18:18:26 +00:00
Commented Sep 21, 2018 at 18:18 — Kzryzstof
– Kzryzstof, Commented Sep 21, 2018 at 18:18

askilondz · Accepted Answer · 2018-09-21 18:11:12Z

1

I believe the issue is because on your html it's trying to loop through gamesList before the data is fetched from firebase. You need to set it to async.

<ion-item ngFor="let g of gamesList | async">

And if you do it this way you don't need to call subscribe... let the async pipe handle subscriptions for you.

this.gamesList = this.firebase.getGames(this.currentEvent)

answered Sep 21, 2018 at 18:11

askilondz

3,3042 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2337258 Over a year ago

Unfortunately, this was another route i tried that results in the same error. I'll post the full error.

askilondz Over a year ago

If you don't use the async pipe you can still use the same method your are doing where you set the gamesList in your subscribe(). But in the html you need to check if gameList is not null first: *ngIf="gamesList" then inside that do your for loop.

Collectives™ on Stack Overflow

AngularFire2 - Ionic - Cannot read property of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related