Best way to "flatten" an array inside an RxJS Observable

angular rxjs rxjs5
AngularChef picture AngularChef · Feb 27, 2017 · Viewed 31.1k times · Source

My backend frequently returns data as an array inside an RxJS 5 Observable (I'm using Angular 2).

I often find myself wanting to process the array items individually with RxJS operators and I do so with the following code (JSBin):

const dataFromBackend = Rx.Observable.of([
  { name: 'item1', active: true },
  { name: 'item2', active: false },
  { name: 'item3', active: true }
]);

dataFromBackend
  // At this point, the obs emits a SINGLE array of items
  .do(items => console.log(items))
  // I flatten the array so that the obs emits each item INDIVIDUALLY
  .mergeMap(val => val)
  // At this point, the obs emits each item individually
  .do(item => console.log(item))
  // I can keep transforming each item using RxJS operators.
  // Most likely, I will project the item into another obs with mergeMap()
  .map(item => item.name)
  // When I'm done transforming the items, I gather them in a single array again
  .toArray()
  .subscribe();

The mergeMap(val => val) line doesn't feel very idiomatic.

Is there a better way to apply transformations to the members of an array that's emitted by an Observable?

NB. I want RxJS operators (vs array methods) to transform my items because I need the ability to project each item into a second observable. Typical use case: backend returns of list of item ids and I need to request all of these items from the backend.

Answer

martin picture martin · Feb 27, 2017

You can use concatAll() or mergeAll() without any parameter.

dataFromBackend.pipe(
  tap(items => console.log(items)),
  mergeAll(), // or concatAll()
)

This (including mergeMap) works only in RxJS 5 because it treats Observables, arrays, array-like objects, Promises, etc. the same way.

Eventually you could do also:

mergeMap(val => from(val).pipe(
  tap(item => console.log(item)),
  map(item => item.name),
)),
toArray(),

Jan 2019: Updated for RxJS 6

Related questions

How to return value from function which has Observable subscription inside?

I dont know how to extract value from Observable to be returned by function in which Observable is present. I need just a value from it to be returned, nothing else. Current version which works function getValueFromObservable() { this.store.subscribe( (…

Read More
What is the correct way to share the result of an Angular Http network call in RxJs 5?

By using Http, we call a method that does a network call and returns an http observable: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } If we take this observable and add multiple subscribers to it: …

Read More
What is pipe for in rxJS

I think I have the base concept, but there are some obscurities So in general this is how I use an observable: observable.subscribe(x => { }) If I want to filter data I can use this: import { first, last, map, …

Read More