title: Angular & RxJS - Combining Multiple XHR Service calls using .mergeMap
body: <p>I recently asked a question to <a href="https://stackoverflow.com/questions/46805272/preventing-a-pyramid-of-doom-using-rxjs-subscribe-with-angular-flattening-the">prevent a pyramid of doom</a>
  and got a great answer however as my system advances I need to amend my code and my implementation isn't working.</p>
  
  <p>In my system I subscribe to an Angular Material Dialog afterClose action, I take the result, filter that result, then I call a service that retrieves data (using REST / XHR). When this is resolved I take and modify some of the returned data and return another service method. mergeMap is used to prevent a series of nested <code>.subscribe</code>s</p>
  
  <pre><code>dialogRef
  .afterClosed()
  .filter((result) =&gt; typeof result === 'string')
  .mergeMap((result) =&gt; this.myService.getuser(this.id).mergeMap((user: User) =&gt; {
    const mergedObj = Object.assign({}, user, {LifeEventDate: this.dateService.convertToCorrectFormat(result)});
    return this.myService.updateUser(this.id, mergedObj);
  }))
  .do(() =&gt; {
    // run some actions in the Component...
  })
  .subscribe();
  </code></pre>
  
  <p>Now I wish to take some of the returned data from <code>this.myService.getuser</code> and call the same service but another method <code>this.myService.logSomething</code> (which also makes a REST / XHR call). The method <code>this.myService.logSomething</code> doesn't return any necessary data, when complete it just returns an object <code>{success: true}</code> although it may be prudent to introduce a <code>.catch</code> incase of errors. I'd like to add it to the code above, placing it within the second mergeMap doesn't work as when looking in the Chrome Dev tools no network request is made for this. For example...</p>
  
  <pre><code>dialogRef
  .afterClosed()
  .filter((result) =&gt; typeof result === 'string')
  .mergeMap((result) =&gt; this.myService.getuser(this.id).mergeMap((user: User) =&gt; {
  
    /* NEW CODE */
    // I need to take some of the data returned from the returned user above
    this.myService.logSomething({user:user.id, something: user.something, somethingElse: user.somethingElse});
  
    const mergedObj = Object.assign({}, user, {LifeEventDate: this.dateService.convertToCorrectFormat(result)});
    return this.myService.updateUser(this.id, mergedObj);
  }))
  .do(() =&gt; {
    // run some actions in the Component...
  })
  .subscribe();
  </code></pre>
  
  <p>I am unsure where or how to place this new service call. Both service methods nested in the first <code>.mergeMap</code> require data from the first service call, how can I add a third service call to my code?</p>
  
  <p>Sorry if the question is badly structured, makes no sense or is unclear please let me know and I'll rephrase.</p>