why should we use subscribe() over map() in Angular?

AngularTypescriptRxjsObservableAngular Observable

Angular Problem Overview


I am trying to take advantage of observables in angular2 and got confused on why should i use map() over subscribe(). Suppose i am getting values from a webApi, like this

  this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')

Now using subscribe(success, error, complete) I can get all the values on the success callback and I can return the values on the complete callback. If I can do all theses functionalities then what is the need of map()? Does it give any advantage?

In short, why one should write like this:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .map(r=>{})
    .subscribe(value => {
    }, error => error, () => {
});

when they can simply write this without the map function:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .subscribe(value => {        
    }, error => error, () => {           
});

Angular Solutions


Solution 1 - Angular

If you want to return an Observable some other code can subscribe to, but you still want to manipulate the data events in the current method, use map.

The actual user of the observable needs to subscribe(), because without subscribe() the observable won't be executed at all. (forEach() or toArray() and probably others work as well to execute the observable instead of subscribe())

subscribe() returns a Subscription that can not be subscribed to, but it can be used to cancel the subscription.

map() returns an Observable which can be subscribed to.

Solution 2 - Angular

Think map as a middleware which transforms the response.

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
.map(r=>r.json())
 .subscribe(result => {
              // here result would have json object that was parsed by map handler...
            },failurCallback,completeCallback)

subscribe is used to invoke the observable, please read a good doc on cold-vs-hot-observables

Solution 3 - Angular

You need subscribe to run your async request. If you just set map - no requests will trigger. You can check.

Good practice to use map to preproccess you data because many subscribers can comsume your results. So instead of adding preprocessing to each client (subscriber) you can prepare single output with single data schema for all.

Solution 4 - Angular

.map() is an rxjs operator, it will show the result in array [] form either .json() form

https://www.learnrxjs.io/operators/transformation/map.html

Solution 5 - Angular

Observables are streams and they are designed to be written in functional streams. You should use RxJS operations because it is the 'functional' way of implementing subsctiptions to observables. Usually this happens when we take data outside of the Observable stream.

This is an asynchronous operation forced to work synchronously.

bad_example() {
  let id;
  this.obs.subscribe(param => id = param['id']);
    this.get(id).subscribe(elem => this.elem = elem);
}

This is an asynchronous operation that works as supposed to work. (As a stream)

good_example() {
  this.obs
    .map(param => param['id'])
    .switchMap(id => return this.get(id))
    .subscribe(elem => this.elem = elem);
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLijin DurairajView Question on Stackoverflow
Solution 1 - AngularGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - AngularA.T.View Answer on Stackoverflow
Solution 3 - AngularVadimBView Answer on Stackoverflow
Solution 4 - AngularN4R35HView Answer on Stackoverflow
Solution 5 - Angularyeaaaahhhh..hamf hamfView Answer on Stackoverflow