How to modify inner element of each Object emitted by observable before returning the outer observable

Question

I am new to the whole concept of Observables and rxjs so this might be very obvious. But please help as I am desperate to learn

I have a funtion when a user clicks to show comments under a blog post

 showComments(){
    
    this.firestoreservice.getComments(this.job.id).subscribe( data =>{
      this.comments = data //type [] of comment objects with (message,posterID,timeposted...)
    })

    this._showcomments = true;

  }

This function calls a service function that returns an observable to my comments list for that job. In the subscribe to that observable is initialise a variable to hold all my comments. Before I do that however, is there a way to replace the posterID attribute of each comment with the matching username? See desired outcome below:

showComments(){
   
   this.firestoreservice.getComments(this.job.id).subscribe( data =>{

     //for each comment held in data, replace comment.posterID with getUserName(posterID)
     //getUserName(posterID) will also return an observable which emmits one string
     //then append comment to comments list (or add back in to data then destructively assign 
     //comments=data )
     
     this.comments = data //type [] of comment objects with (message,posterID,timeposted...)
   })

   this._showcomments = true;

 }

bryan60 · Accepted Answer · 2020-07-16T20:49:40.707

1

it'll look a little like this....

this.firestoreservice.getComments(this.job.id).pipe(
  switchMap(comments => { // switchMap to subscribe to inner
    const getUsers$ = comments.map(comment => // array map comments into userName fetch
      this.firestoreservice.getUserName(comment.posterID).pipe(
        // once you have the username, rx map back into the comment with the username assigned
        map(userName => ({...comment, posterID: userName})),
        first() // use to complete after one emission to make forkJoin work
      )
    )
    return forkJoin(...getUsers$); // forkJoin them all together for parallel execution
  });
).subscribe(data => {
  this.comments = data // now just set the data
})

edited Jul 16 '20 at 20:49

answered Jul 15 '20 at 17:38

bryan60

28,215
4
48
65

I think I understand the logic but it hangs my code..as if one of the operators don't complete. It's a great starting point though, THANKS! – Randy Quaye Jul 15 '20 at 19:11
Firestore observables probably don’t complete.... So it’s a case of your desired behavior here. Do you want to be subscribed to userName changes or just get them once? And do you want to get them everytime comments emits or just once? – bryan60 Jul 16 '20 at 01:19
Get them once...and everytime comments emmits! Any help would be appreciated! – Randy Quaye Jul 16 '20 at 20:39
Just apply a first operator on the inner chain after the map, answer updated – bryan60 Jul 16 '20 at 20:48

How to modify inner element of each Object emitted by observable before returning the outer observable

1 Answers1