How to retrieve data from firebase database with an observable

Question

Setup:

 1. ionic: 3.20.0
 2. AngularFire2 V5.0.0-rc6
 3. Cordove: 8.0.0
 4. firebase: "^4.12.0"

I try to retrieve data from my database like this:

import { AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';

Where FirebaseListObservable has no exported member 'FirebaseListObservable'

export class HomePage {
   items: FirebaseListObservable<any[]>;

   constructor(
      public db: AngularFireDatabase
    ){

       this.items = db.list('/restaurant_menu');
       console.log('check', this.items);
    }
}

And in the html template:

<ion-list>
    <ion-item class="text" *ngFor="let item of items">
        {{item}}
    </ion-item>
</ion-list>

But this returns me: Error: Cannot find a differ supporting object '[object Object]'

And the console.log shows me this:

{query: Reference, update: ƒ, set: ƒ, push: ƒ, remove: ƒ, …}
auditTrail:ƒ (events)
push:ƒ (data)
query:Reference {repo: Repo, path: Path, queryParams_: QueryParams, orderByCalled_: false}
remove:ƒ remove(item)
set:ƒ dataOperation(item, value)
snapshotChanges:ƒ (events)
stateChanges:ƒ (events)
update:ƒ dataOperation(item, value)
valueChanges:ƒ (events)
__proto__: Object

console.log('check', this.items); is show something or not ??? — Utpaul
– Utpaul, Commented Mar 25, 2018 at 12:00
` console.log('check', this.items);` don't work with observables. You need subscribe to get the data — Hareesh
– Hareesh, Commented Mar 25, 2018 at 12:32
@Hareesh It returns me this: TypeError: this.items.subscribe is not a function — Sireini
– Sireini, Commented Mar 25, 2018 at 12:40

Hareesh · Accepted Answer · 2018-03-25 13:04:54Z

3

Here is how Angularfire2 doc says

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

export class HomePage {
   itemsRef: AngularFireList<any>;
   items: Observable<any[]>;

   constructor(
      public db: AngularFireDatabase
    ){

       this.itemsRef = db.list('restaurant_menu');
       this.items = this.itemsRef.valueChanges();
       this.items.subscribe(res=> console.log(res));
    }
}

You can check the doc

answered Mar 25, 2018 at 13:04

Hareesh

6,9005 gold badges36 silver badges62 bronze badges

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

Comments

Melchia · Accepted Answer · 2018-03-25 13:08:40Z

1

You can store the observable (valuechanges) in a variable then use the async tag.

   items$: Observable<any[]>;
  constructor(public db: AngularFireDatabase){
       this.items$ = this.db.list('/restaurant_menu').valueChanges();
    }

In your html

<ion-list>
    <ion-item class="text" *ngFor="let item of (items$ |async)">
        {{item}}
    </ion-item>
</ion-list>

answered Mar 25, 2018 at 13:08

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Comments

Santi Barbat · Accepted Answer · 2020-05-18 17:32:52Z

-1

Since RxJS 6 you can use the from() operator like:

getUsers(): Observable<firestore.DocumentSnapshot<firestore.DocumentData>> {
    return from(this.db.collection('users').get());
}

answered May 18, 2020 at 17:32

Santi Barbat

2,3332 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to retrieve data from firebase database with an observable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related