Angular firebase inner join using switch map

Question

I am trying to fetch all orders from firebase database, and then fetch detailed info about customers using customerId from order. This is my database schema:

orders:
 customer
customers:
 name
 surname

My html template:

  <h2>Raw Data</h2>
  <pre>{{rawData | async | json}}</pre>

Following code returns ERROR TypeError: "cyclic object value"

  constructor(public db: AngularFireDatabase) {
    this.rawData = db.list('/orders').valueChanges().pipe(
      switchMap(orders => { const customerIds = uniq(orders.map((ord: Order) => ord.customer));
      return customerIds.map(customerId => db.object('customers/' + customerId + '/').valueChanges());} )
    );
  }

However, when I tried to return only one customer, related with the first order, using following code:

  constructor(public db: AngularFireDatabase) {
    this.rawData = db.list('/orders').valueChanges().pipe(
      switchMap(orders => { const customerIds = uniq(orders.map((ord: Order) => ord.customer));
      return db.object('customers/' + customerIds[0] + '/').valueChanges();} )
    );
  }

I received desired output. Why fetching in map doesn't work for me? Do i need to process output from map further? Ideally, I would like to have output like this

{
order_param = order_value
customer = {customer_param = customer_value }
}

I am beginer with Angular, and rxjs, I was trying to follow this article:
https://medium.com/@joaqcid/how-to-inner-join-data-from-multiple-collections-on-angular-firebase-bfd04f6b36b7

Answer 1

It is happening because you are return a array of streams but not subscribing to them. To do that, you can use mergeAll.

As documentation says, mergeAll subscribes to an Observable that emits Observables. Each time it observes one of these emitted inner Observables, it subscribes to that and delivers all the values from the inner Observable on the output Observable.

const getOrders$ = db.list('/orders').valueChanges();
const getCustomerChangesById = customerId => db.object('customers/' + customerId + '/').valueChanges()

constructor(public db: AngularFireDatabase) {
  this.rawData = getOrders.pipe(
    switchMap(orders => { 
      const customerIds = uniq(orders.map((ord: Order) => ord.customer));
      return customerIds.map(getCustomerChangesById);
    }),
    mergeAll(),
  );
}