Custom higher order observable mapping

Question

So I have an Observable which emits an array of items.

I want to map each of the items to a custom object, but one of the object fields is again fetched async, via Observables.

This is what I have so far:

    const resultingObs = arrayObs
        .flatMap(x => x); // map array to a stream of items
        .mergeMap(item => asyncFetch(item.id)); // get async data from another stream

This works well, as it maps every item to the fetched data, what I tried to achieve, so far.

What I would like to end up with, though, is to mergeMap to a custom object, something like this:

[{item: item, fetchedData: fetchedData}, {item: item, fetchedData: fetchedData}]

instead of

[fetchedData, fetchedData, fetchedData]

So I need something like map and mergeMap in the same operator, if that makes sense.

Thanks

flatMap and mergeMap are the same thing, the latter being just the new name of the former. — Picci

martin martin · Accepted Answer · 2018-09-19T10:38:45

You can just map the inner async result into an object you want:

.mergeMap(item => asyncFetch(item.id)
  .map(fetchedData => ({
    fetchedData,
    item
  })
);

Custom higher order observable mapping

1 Answers