Ionic 2 Angularfire2 - add list of objects from database to FirebaseListObservable

Question

I'm trying to display a list of objects in my Firebase Database, but I am having a hard time to add the objects to the FirebaseListObservable.

Here is my code:

    products: FirebaseListObservable<any[]>;

    this.db.list('products/' + this.user.uid, { preserveSnapshot: true})
                .subscribe(snapshots=>{
                  var jsonObject = [];
                  snapshots.forEach(snapshot => {
                    jsonObject.push(snapshot.val());
                  });
                  this.products = jsonObject;
    });

The error I get is that I can't assigne any[] to a FirebaseListObservable.

This is my HTML:

<ion-list>
    <ion-item class="text" *ngFor="let product of products | async">
      {{product}}
    </ion-item>
 </ion-list>

My database looks like this:

this.db.list this returns Observables?

Suraj Rao
– Suraj Rao

2017-06-07 06:38:12 +00:00
Commented Jun 7, 2017 at 6:38 — Suraj Rao
– Suraj Rao, Commented Jun 7, 2017 at 6:38

Allen Chen · Accepted Answer · 2017-06-07 07:18:45Z

3

your products is FirebaseListObservable, however, your jsonObject is an array, so you can't let this.products = jsonObject

maybe you should do like the following:

products: Observable<any[]>;
this.products = this.db.list('products/' + this.user.uid, { preserveSnapshot: true})
            .map(snapshots=>{
             return snapshots.map(snapshot => {
                return snapshot.val();
              });
});

answered Jun 7, 2017 at 7:18

Allen Chen

703 bronze badges

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

3 Comments

Christer Over a year ago

I tried to implement your solution, but I couldnt see any products in my html page

Allen Chen Over a year ago

in your .ts file, use the following code to print the array at first, to check if the array exists: this.products.subscribe((items)=>console.log(items)) you can add this code in ngOnInit() method

Christer Over a year ago

my bad, had a typing mistake in my HTML. It works now :) thank you for the answer!

Collectives™ on Stack Overflow

Ionic 2 Angularfire2 - add list of objects from database to FirebaseListObservable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related