Why do we need to use flatMap

Question

I am starting to use RxJS and I don t understand why in this example we need to use a function like flatMap or concatAll  where is the array of arrays here   var requestStream   Rx Observable just  https   api github com users     var responseMetastream   requestStream    flatMap function requestUrl        return Rx Observable fromPromise jQuery getJSON requestUrl           responseMetastream subscribe url   gt   console log url      If someone can visually explain what is happening  it will be very helpful

User · Answer

It s not an array of arrays  It s an observable of observable s    The following returns an observable stream of string   requestStream    map function requestUrl        return requestUrl          While this returns an observable stream of observable stream of json  requestStream    map function requestUrl        return Rx Observable fromPromise jQuery getJSON requestUrl            flatMap flattens the observable automatically for us so we can observe the json stream directly

User · Answer

When I started to have a look at Rxjs I also stumbled on that stone  What helped me is the following    documentation from reactivex io   For instance  for flatMap  http   reactivex io documentation operators flatmap html documentation from rxmarbles   http   rxmarbles com   You will not find flatMap there  you must look at mergeMap instead  another name   the introduction to Rx that you have been missing  https   gist github com staltz 868e7e9bc2a7b8c1f754  It addresses a very similar example  In particular it addresses the fact that a promise is akin to an observable emitting only one value  finally looking at the type information from RxJava  Javascript not being typed does not help here  Basically if Observable lt T gt  denotes an observable object which pushes values of type T  then flatMap takes a function of type T  - gt  Observable lt T gt  as its argument  and returns Observable lt T gt   map takes a function of type T  - gt  T and returns Observable lt T gt     Going back to your example  you have a function which produces promises from an url string  So T    string  and T   promise  And from what we said before promise   Observable lt T   gt   so T   Observable lt T   gt   with T     html  If you put that promise producing function in map  you get Observable lt Observable lt T   gt  gt  when what you want is Observable lt T   gt   you want the observable to emit the html values  flatMap is called like that because it flattens  removes an observable layer  the result from map  Depending on your background  this might be chinese to you  but everything became crystal clear to me with typing info and the drawing from here  http   reactivex io documentation operators flatmap html

User · Answer

Here to show equivalent implementation of a flatMap using subscribes   Without flatMap    this searchField valueChanges debounceTime 400   subscribe    term   gt  this searchService search term     subscribe  results   gt          console log results           this result   results                  With flatMap   this searchField valueChanges debounceTime 400       flatMap term   gt  this searchService search term        subscribe results   gt          console log results         this result   results            http   plnkr co edit BHGmEcdS5eQGX703eRRE p preview  Hope it could help   Olivier

User · Answer

flatMap transform the items emitted by an Observable into new Observables  then flattens the emissions from those into a single Observable    Check out the scenario below where get  posts   returns an Observable that is  flattened  by flatMap   myObservable map e   gt  get  posts    subscribe o   gt  console log o       this would log Observable objects to console     myObservable flatMap e   gt  get  posts    subscribe o   gt  console log o       this would log posts to console

User · Answer

Simple    1 2 3  map x   gt   x  x   10        1  10    2  20    3  30     1 2 3  flatMap x   gt   x  x   10       1  10  2  20  3  30

User · Answer

a   b   c   flatMap function e        return  e  e   x   e   y    e   z              a    ax    ay    az    b    bx    by    bz    c    cx    cy    cz       a   b   c   map function e        return  e  e   x   e   y    e   z             Array 4   Array 4   Array 4     You use flatMap when you have an Observable whose results are more Observables     If you have an observable which is produced by an another observable you can not filter  reduce  or map it directly because you have an Observable not the data  If you produce an observable choose flatMap over map  then you are okay   As in second snippet  if you are doing async operation you need to use flatMap    x000D   x000D  var source   Rx Observable interval 100  take 10  map function num   x000D      return num 1 x000D      x000D  source subscribe function e   x000D      console log e  x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs rxjs 5 4 1 Rx min js  gt  lt  script gt  x000D   x000D   x000D     x000D   x000D  var source   Rx Observable interval 100  take 10  flatMap function num   x000D      return Rx Observable timer 100  map      gt  num  x000D      x000D  source subscribe function e   x000D      console log e  x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs rxjs 5 4 1 Rx min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

People tend to over complicate things by giving the definition which says       flatMap transform the items emitted by an Observable into   Observables  then flatten the emissions from those into a single   Observable   I swear this definition still confuses me but I am going to explain it in the simplest way which is by using an example  Our Situation  we have an observable which returns data simple URL  that we are going to use to make an HTTP call that will return an observable containing the data we need so you can visualize the situation like this   Observable 1               Make Http Call Using Observable 1 Data  returns Observable 2                                The Data We Need   so as you can see we can t reach the data we need directly so the first way to retrieve the data we can use just normal subscriptions like this   Observable 1 subscribe  URL    gt             Http get URL  subscribe  Data We Need    gt                      console log Data We Need                       this works but as you can see we have to nest subscriptions to get our data this currently does not look bad but imagine we have 10 nested subscriptions that would become unmaintainable   so a better way to handle this is just to use the operator flatMap which will do the same thing but makes us avoid that nested subscription   Observable 1      flatMap URL   gt  Http get URL        subscribe Data We Need   gt  console log Data We Need

User · Answer

An Observable is an object that emits a stream of events  Next  Error and Completed    When your function returns an Observable  it is not returning a stream  but an instance of Observable  The flatMap operator simply maps that instance to a stream   That is the behaviour of flatMap when compared to map  Execute the given function and flatten the resulting object into a stream

User · Answer

flatMap transform the items emitted by an Observable into Observables  then flatten the emissions from those into a single Observable  I am not stupid but had to read this 10 times and still don t get it  When I read the code snippet    1 2 3  map x   gt   x  x   10        1  10    2  20    3  30     1 2 3  flatMap x   gt   x  x   10       1  10  2  20  3  30   then I could understand whats happening  it does two things    flatMap    map  transform    emitted items into Observables  flat  then merge those Observables as one Observable       The transform word says the item can be transformed in something else  Then the merge operator becomes clear to  it does the flattening without the mapping  Why not calling it mergeMap  It seems there is also an Alias mergeMap with that name for flatMap

User · Answer

With flatMap  var requestStream   Rx Observable just  https   api github com users     var responseMetastream   requestStream    flatMap function requestUrl        return Rx Observable fromPromise jQuery getJSON requestUrl           responseMetastream subscribe json   gt   console log json      Without flatMap  var requestStream   Rx Observable just  https   api github com users     var responseMetastream   requestStream    map function requestUrl        return Rx Observable fromPromise jQuery getJSON requestUrl           responseMetastream subscribe jsonStream   gt      jsonStream subscribe json   gt   console log json

[javascript] Why do we need to use flatMap?

Examples related to javascript

Examples related to rxjs