How to use observables in angular2 service calls?

Question

I have a service call from my component which gets the list of heroes.from that function where it calls another function which has the http request...How can i subscribe to the function call so that i will get the response properly...Here is my plunker demo http://plnkr.co/edit/UM9STMwaOsgolhBjADjx?p=preview ... This is how i am calling the service from my component

 ngOnInit() { 
              this.heroService.getHeroes()
                 .subscribe(
                  heroes => this.heroes = heroes,
                  error =>  this.errorMessage = <any>error);
 }

And in my Service class i have called this method which calls another method which has http request and subscribed to that...

  getHeroes (){
return this.GetListOfHeroes()
        .subscribe((data: any) => {
            return data;
        }
        );
}

And finally this is the method which gets the list...

  GetListOfHeroes(){
    return this.http.get(this.heroesUrl)
                .map(this.extractData)
                .catch(this.handleError);
 }

If i directly call GetListOfHeroes() method from my component it works fine but if i try to call that from another method it shows this error this.heroService.getHeroes(...).subscribe is not a function Somebody please tell me where i am doing wrong...Thanks

Günter Zöchbauer · Accepted Answer · 2016-05-31 14:56:47Z

2

Use .map(...) instead of .subscribe(...) in getHeroes() like:

  getHeroes (){
    return this.GetListOfHeroes()
    .map((data: any) => {
        return data;
    });
  }

This way getHeroes() returns an Observable while with .subscribe() it returns a Subscription you can't subscribe to.

answered May 31, 2016 at 14:56

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-05-31 14:56:34Z

In fact, you should subscribe within the getHeroes method since it will return a subscription and not an observable.

getHeroes (){
  return this.GetListOfHeroes()
    .subscribe((data: any) => { // <-----
        return data;
    });
}

The subscribe method can only be called on an observable. The subscription object is usable to cancel the subscription...

In fact, it depends on what you want to do within the getHeroes method. You can, for example, leverage the do operator or the map one. Here is a sample:

getHeroes (){
  return this.GetListOfHeroes()
    .do((data: any) => { // <-----
      // do something with data
    })
    .map((data: any) => {
      // return something else in the data flow
      return { attr: 'value' };
    });
}

Collectives™ on Stack Overflow

How to use observables in angular2 service calls?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related