Why do we need to use flatMap?

by 
['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.

var source = Rx.Observable.interval(100).take(10).map(function(num){
    return num+1
});
source.subscribe(function(e){
    console.log(e)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>
var source = Rx.Observable.interval(100).take(10).flatMap(function(num){
    return Rx.Observable.timer(100).map(() => num)
});
source.subscribe(function(e){
    console.log(e)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>

More Related Contents:

  1. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  2. How to get current value of RxJS Subject or Observable?
  3. BehaviorSubject vs Observable?
  4. Angular 4 Interceptor retry requests after token refresh
  5. How can I close a dropdown on click outside?
  6. What is “callback hell” and how and why does RX solve it?
  7. How can I `await` on an Rx Observable?
  8. What are the semantics of different RxJS subjects?
  9. Subject vs BehaviorSubject vs ReplaySubject in Angular
  10. Chaining Observables in RxJS
  11. Promise.all behavior with RxJS Observables?
  12. How to do the chain sequence in rxjs
  13. RxJS Promise Composition (passing data)
  14. RxJS sequence equivalent to promise.then()?
  15. Rxjs One Observable Feeding into Another
  16. RXJS Wait for all observables in an array to complete (or error)
  17. Rxjs toPromise() deprecated
  18. What are use cases for mergeMap operator?
  19. How to make one Observable sequence wait for another to complete before emitting?
  20. How to achieve a debounce service on input keyup event in angular2 with rxjs
  21. How to cancel a subscription in Angular2
  22. Is it good to call subscribe inside subscribe?
  23. What is the difference between Observable and a Subject in rxjs?
  24. How to ‘wait’ for two observables in RxJS
  25. What is the difference between BehaviorSubject and Observable?
  26. Return an empty Observable
  27. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  28. Property ‘catch’ does not exist on type ‘Observable’
  29. How to catch error and continue executing a sequence in RxJs?
  30. Observable Finally on Subscribe

Leave a Comment