Use of rxjs withLatestFrom function

Question

Trying to execute the following code that is supposed to :

• Retrieve a list of all the chats of a user
• retrieve last message for all these chats
• Retrieve recipients info for all these chats

• Merge all together as an array in which each item is a combination of a chat, last message and recipient info

   this.msgService.getUserChatList(this.uid).do((chats) => {
      this.chats = [];
      if (!(chats.length > 0))
        this.loading = false;
      this.getLastMessages$ = this.getLastMessagesForChats(chats);
      this.getRecipients$ = this.getRecipientsForChats(chats);
  }).switchMap( chats => Observable.from(chats) ).withLatestFrom(
     this.getLastMessages$,
     this.getRecipients$,
     (chat, lastMessages, recipients) => ({
       chat: chat,
       last: lastMessages[chat['id']],
       recipient: recipients[chat['id']]
      })
  ).subscribe( chats => {
    console.log('chats ', chats);
    this.chats.push(chats);
    this.loading = false;
  });
  

Additional functions

getLastMessagesForChats(chats: any): Observable<any[]> {
    let lastMessages$ = [];
    for (let chat of chats) {
      let obs = this.msgService.getLastMessage(chat.id)
        .map( last => ({chat: chat.id, last: last}) );
      lastMessages$[chat.id] = obs;
    }
    return Observable.from(lastMessages$).merge().toArray();
  }

  getRecipientsForChats(chats: any): Observable<any[]> {
    let recipients$ = [];
    for (let chat of chats) {
      let obs = this.userService.getUserPublicInfo(chat.recipient)
        .map( recipient => ({chat: chat.id, recipient: recipient}) );
      recipients$[chat.id] = obs;
    }
    return Observable.from(recipients$).merge().toArray();
  }

I am getting the following error

Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined
    TypeError: Cannot read property 'subscribe' of undefined

I cannot find what is going wrong... I tried to reproduce in the following JSBIN

Any idea?

Answer 1

The chain is constructed bottom up. This means that the order is subscribe() -> withLatestFrom -> switchMap -> do.

So at the point where withLatestFrom tries to subscribe to getLastMessages$ and getRecipients$ they are undefined because they are assigned only after the first value is propagated from the source Observable which happens in do().

Edit:

// Execution
getLastMessages$ = Rx.Observable.of(1);
getRecipients$ = Rx.Observable.of(2);
chats = [];

getUserChatList('uC')
  .do( (chats) => {
    getLastMessages$ = getLastMessagesForChats(chats);
    getRecipients$ = getRecipientsForChats(chats);
  } )
  .switchMap( chats => Rx.Observable.from(chats) )
  .withLatestFrom(
    getLastMessages$,
    getRecipients$,
    (chat, lastMessages, recipients) => ({
        chat: chat,
        last: lastMessages[chat['id']],
        recipient: recipients[chat['id']]
      }))
  .subscribe( c => {
    console.log('chats ', c);
    chats.push(c);
  });

http://jsbin.com/sulatar/3/edit?js,console