Retrieve List from firebase Database in Ionic

Question

I am trying to retrieve the data from a list in database and display it in my Ionic Application. My Database is the following:

In my case i want to retrieve all the data from the Notifications Folder inside the database and diplay them in my app

My souce code is the following:

home.hmtl

<ion-header>
   <ion-navbar color="primary">
      <ion-title>
         Notifications
      </ion-title>
   </ion-navbar>
</ion-header>




<ion-content class="background">
<h2>Notifications</h2>
<ion-list>
<ion-item *ngFor="let notification of notifications | async"></ion-item>
{{notification.description}}
{{notification.title}}
</ion-list>
</ion-content>

and home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import firebase from 'firebase';

    export class HomePage {

      notification:Observable<any>;
      constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
        let notification = this.afd.list('Notifications');

      }
    }

Each time I run the app in my web-explorer("ionic serve") i get the following error : TypeError: Cannot read property 'description' of undefined

Can anyone please explain me what i am doing wrong? Thanks in Regards

Kim · Accepted Answer · 2018-02-09 11:09:56Z

1

First it seems you're trying to access notification title and description outside of the ion-item

try change this

<ion-list>
<ion-item *ngFor="let notification of notifications | async"></ion-item>
{{notification.description}}
{{notification.title}}
</ion-list>

to this

<ion-list>
  <ion-item *ngFor="let notification of notifications | async">
    <p>{{notification.description}}</p>
    <p>{{notification.title}}</p>
  </ion-item>
</ion-list>

Second, it also seems you're trying to bind to notifications from your HTML but the variable in your class is without s.

try changing this code

  notification:Observable<any>;
  constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
    let notification = this.afd.list('Notifications');
  }

to this

 notifications:Observable<any>;
  constructor(public navCtrl: NavController, public afd: AngularFireDatabase, public http: HttpClient) {
    this.notifications = this.afd.list('Notifications');
  }

Update: This line this.notifications = this.afd.list('Notifications'); should be this.notifications = this.afd.list('Notifications').valueChanges();

edited Feb 9, 2018 at 11:09

answered Feb 9, 2018 at 10:29

Kim

1,2049 silver badges18 bronze badges

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

3 Comments

user3397260 Over a year ago

I am now getting an error in the line this.notifications = this.afd.list('Notifications'); Type AngularList<{}> is not assignable to type Observable<any>

Kim Over a year ago

Ah, that is because we're trying to put a specific datatype into a variable which doesn't accept that datatype. I'm not familiar with AngularFire but a quick look at their documentation says we should add ".valueChanges();" so the line is this.notifications = this.afd.list('Notifications').valueChanges(); this should work, this also gives you realtime updates.

Kim Over a year ago

If my answer solved your issue, please select my answer as the solution :)

Shafran Naizer · Accepted Answer · 2019-03-09 20:12:12Z

0

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs'
import { query } from '@angular/core/src/render3';

class item {
  constructor(public title) { }
}
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html', 
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

        public books: AngularFireList<item[]>;
          items: Observable<any[]>;
          constructor(db: AngularFireDatabase) { 
            this.items = db.list('Notifications',ref => {
              return ref.orderByChild('id')

                  }).valueChanges();
            }

}
export class AppComponent {

}

answered Mar 9, 2019 at 20:12

Shafran Naizer

999 bronze badges

Collectives™ on Stack Overflow

Retrieve List from firebase Database in Ionic

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related