Combining Streams with flatMap

A case for FlatMap:

We want to make something a bit more useful and attach our server request to a button click. How can that be done with streams? Let's observe the example below.

  let eventStream = 
    Rx.Observable.fromEvent(document.getElementById('refreshBtn'), 'click');

  let responseStream = eventStream  
    .flatMap(() => Rx.Observable.fromPromise(

    (response) => $'Async Data: ', response),
    (error) => $'Async Error: ', error)

First we create an observable of button click events on some button. Then we use the flatMap function to transform our event stream into our response stream.

Note that flatMap flattens a stream of observables (i.e observable of observables) to a stream of emitted values (a simple observable), by emitting on the "trunk" stream everything that will be emitted on "branch" streams.

Alternatively, if we were to use map instead, we would create a meta stream, i.e. a stream of stream.

  let metaStream = eventStream  
    .map(() => Rx.Observable.fromPromise(

  // We would have to subscribe to each stream received below
  // to achieve the behaviour we want
    (stream) => $'Async Data: ', stream),
    (error) => $'Async Error: ', error)

This is not very useful in our current example as we would have to subscribe to an observable received from an observable stream.

View Example