Feed observable data into other observable subscription

Question

I'm creating an app and want users to open their active chat. It is powered by Firebase as backend. However, after retrieving data from the first observable subscription which I need to use to feed as a parameter in the second Observable subscription, the second subscription doesn't return any data: it's empty.

In the first subscription I retrieve a unique ChatID. With the second subscription I want to receive all the messages from the Firebase collection with this ChatID.

I already found that it has something to do with the asynchronous style of observables, but I don't know how to nest observables since neither FlatMap nor MergeMap works with my observable.

    //First subscription
    this.ActieveGebruikerObservable = this.firebaseService.Gebruiker_lezen(this.ActieveGebruiker.uid);
    this.ActieveGebruikerObservable.subscribe(
      val => this.ActieveGebruikerDetails = val
    );

    //Second subscription
    this.ActieveChatObservable = this.firebaseService.Chat_lezen(this.ActieveGebruiker.uid, this.ActieveGebruikerDetails.ActieveChat);
    this.ActieveChatObservable.subscribe(
      val => this.ActieveChatDetails = val
    );

So it seems like this.ActieveGebruikerDetails.ActieveChat is empty when fed as paramter into the second subscription. However, when I display it as {{this.ActieveGebruikerDetails.ActieveChat}} on the page, it returns the desired value.

I want to retrieve the second subscription data, and not to be it blank data.

I think a bit of your code got chopped off. Can you post a bit more of where ActieveGebruiker and ActieveGebruikerDetails.ActieveChat are set? — Steve

Boyen Boyen · Accepted Answer · 2019-08-27T16:02:27

You were on the right path with looking into mergeMap ( flatMap == mergeMap )

Since you didn't give the name of the first observable, I'll give call it foo

foo.pipe(
    tap(val => this.ActieveGebruikerDetails = val), // If you still wanted it present on `this`, but not needed
    mergeMap(val => this.firebaseService.Chat_lezen(this.ActieveGebruiker.uid,val.ActieveChat) // map to the firebase observable, using the value from the previous observable, allowing you to access ActieveChat
).subscribe(
  val => this.ActieveChatDetails = val
);

Feed observable data into other observable subscription

2 Answers