AngularFire2: Perform 'Joins' on FirebaseListObservables using RxJS .map()

Question

As stated in another question, I\'m developing an Ionic 2 App using Firebase as Backend.

I have categories and I have products. Products belong to categories. As it

Answer 1

I solved the problem.

provider (*.ts):

getProductsOfCategory(catId){
  let result = this.af.database.list('/categories/'+catId+'/prods')
    .map(items => { 
      for (let product of items) { 
        this.af.database.object('/products/'+product.$key)
        .subscribe( data => {
          product.details = data;
        });
      }
      return items;        
    })      
  return result;
}


getCategoriesAndProducts(){
  let result = this.af.database.list('/categories')
    .map(items => { 
      for (let category of items) {
        this.getProductsOfCategory(category.$key)
        .subscribe(data => {
          category.productDetails = data;
        })
      }
      return items;
    })
  return result;
}

provider call in the tempaltes ts-file:

getCategoriesAndProducts(){
    this.categoryService.getCategoriesAndProducts()
      .subscribe(data => {
          this.categoriesAndProducts = data;
});

template / view (*.html):

<ng-container *ngFor="let cat of categories">
  <ng-container *ngIf="cat.parent_cat === 'noParentCategory'">
    <h3>
      {{cat.cat_name}}
    </h3>
    <ng-container *ngFor="let subcat of categoriesAndProducts">
      <ion-list>
        <ng-container *ngIf="subcat.parent_cat === cat.$key">            
          <ion-item-divider>
            {{subcat.cat_name}}
          </ion-item-divider>
          <ion-item *ngFor="let prod of subcat.productDetails">
            {{prod.details?.prod_name}}
          </ion-item>
        </ng-container>
      </ion-list>
    </ng-container>
  </ng-container>
</ng-container>