Ionic / Firebase RTDB - Gey Object-key for navigation

Question

I'm trying to create simple navigation for my Ionic application that is using Firebase RTDB.

What would be best way to obtain the Object key values from each object from my AngularFireList?

I currently have provider that returns AngularFireList

  public categoryList: AngularFireList<any>;
  getCategoryList(): AngularFireList<any> {
    this.categoryList = this.afDatabase.list(`/categories`);
    return this.categoryList;
  }

In my page I'm using Observable to show the data in my page.

home.ts

public categoryList: Observable<any>;
this.categoryList = this.categoryProvider.getCategoryList().valueChanges();

home.html

  <ion-card *ngFor="let category of categoryList | async" (click)="goToCategory(NEED CATEGORY.KEY HERE)">
      <div class="card-title">{{category?.title}}</div>
      <div class="card-subtitle">{{category?.description}}</div>
  </ion-card>

Now I would like to navigate to different page and get the Object-key as a navigation parameter, but the object doesn't contain the key.

I already checked the AngularFire 5.0 Upgrade guide and created following function inside my page constructor:

this.afDb.list('categories').snapshotChanges().map(actions => {
        return actions.map(action => ({ key: action.key, ...action.payload.val() }));
      }).subscribe(items => {
        console.log(items);
        return items.map(item => item.key);
      });

And was able to log the objects that contains the key. But what I don't understand is how should structure this function inside my provider and display the data in my page?

Hareesh Hareesh · Accepted Answer · 2018-02-19T10:01:47

In your provider return an observable

getCategoryList():Observable<any> {
    return this.afDb.list('categories').snapshotChanges().map(actions => {
    return actions.map(action => ({ key: action.key, ...action.payload.val() }));
  })
}

And in your component

public categoryList: Observable<any>;
this.categoryList = this.categoryProvider.getCategoryList();

Ionic / Firebase RTDB - Gey Object-key for navigation

1 Answers