CODEWITHSUNDEEP
javascriptrxjsreactivexredux-observable
Jason Spradlin
Jason Spradlin

Reputation: 1427

Combining the results of an outer & inner observable into a single parameter (array) for the next map method

What I'm trying to do is similar to combineLatest, but the second (inner) observable depends on the response from the first

ajax.get('/first-url')
  .map(res => new Thing(res.response)
  .someMap(thing => 
    ajax.get(`/second-url?code=${thing.code}`)
      .map(res => new OtherThing(res.response))
  ).map(([firstThing, secondThing]) => console.log(firstThing, secondThing))

Essentially, I'd like to be able to merge the two results into a single array of those results that I can use to do a third thing.

My goal is to get data A and data B because I need them BOTH to perform a certain action, and getting data B relies on already having data A.

Upvotes: 3

Views: 2052

Answers (1)

Jason Spradlin
Jason Spradlin

Reputation: 1427

I was able to get this working by doing the following:

ajax.get('/first-url')
  .map(res => new Thing(res.response)
  .mergeMap(firstThing=> 
    ajax.get(`/second-url?code=${firstThing.code}`)
      .map(res => new OtherThing(res.response))
      .map(secondThing => [firstThing, secondThing])
  ).map(([firstThing, secondThing]) => console.log(firstThing, secondThing))

Essentially, in the response from the second observable, return the exact array that I want to consume in the outer observable's .map

It appears that this is rxjs' desired way of handling this. In version 5.x of rxjs, there was a thing called a Result Selector, which could be passed in as a second parameter to create something like this (it would look a lot like the last inner .map) but this appears to have been deprecated for rxjs v6.0:

https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#howto-result-selector-migration

Upvotes: 3

Related Questions