CODEWITHSUNDEEP
typescriptfirebaseionic-frameworkfirebase-realtime-database
user3397260
user3397260

Reputation: 271

Retrieve List from firebase Database in Ionic

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

enter image description here

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

Upvotes: 1

Views: 4170

Answers (2)

Shafran Naizer
Shafran Naizer

Reputation: 99

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 {

}

Upvotes: 0

Kim
Kim

Reputation: 1198

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();

Upvotes: 1

Related Questions