Calling Service in Angular2

Question

I am just starting learning angular2.I have problem while calling service in angular2.The service calls successfully,but I have problem how can I handle data. In Angular1 we do like this:

DemoService.getExchangeDataConnection().then(function(response){
//here we handle all the data
})

Angular2

constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
}


 onClickMe(){
    this.clickMessage ='You are my hero!';
     this.error = "";
    this.countries = [];
    this._sampleService.test()
     .subscribe(
        data => this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."
     );

  }

Here How can I handle data Here is My service:

export class SampleService {

constructor(http: Http){
       this.http = http;
   }

   test(){
console.log(AppSettings.API_ENDPOINT);
    return this.http.get(AppSettings.API_ENDPOINT+"oceania").toPromise()
       .then(res => console.log(res.json()), err => console.log(err));
   }

}

Don't convert you http call to promise.

Chandermani
– Chandermani

2016-04-07 11:22:54 +00:00
Commented Apr 7, 2016 at 11:22 — Chandermani
– Chandermani, Commented Apr 7, 2016 at 11:22

Thierry Templier · Accepted Answer · 2016-04-07 11:25:21Z

4

If the test method returns an observable you need to subscribe on it in a similar way than with promises:

this._sampleService.test()
   .subscribe(
     data => this.countries = data,
     error => this.error = "Region " + this.region + " is invalid."
   );

For example for a test method like this:

test() {
  return this.http.get('http://...').map(res => res.json());
}

You can notice that you can also use promises with Angular2. In this case, you will handle the response the same way as you did.

Edit

You could update your test method this way:

test(){
  console.log(AppSettings.API_ENDPOINT);
  return this.http.get(AppSettings.API_ENDPOINT+"oceania")
               .map(res => console.log(res.json());
 }

and call it like this:

this.service.test().subscribe(data => {
  (...)
});

If you want to leverage promise, you need to return something into your then callback to leverage chaining:

test(){
  console.log(AppSettings.API_ENDPOINT);
  return this.http.get(AppSettings.API_ENDPOINT+"oceania").toPromise()
    .then(res => res.json(), err => console.log(err)); // <---------
}

You can get your data now this way:

this.service.test().then(data => {
  (...)
});

edited Apr 7, 2016 at 11:25

answered Apr 7, 2016 at 11:14

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

Karan Over a year ago

I got subscribe is not a function

Thierry Templier Over a year ago

What does the test method return?

Karan Over a year ago

this returns the data,but I don't know how can I handle this

Thierry Templier Over a year ago

Could add the content of this method in your question? It will be easier to help you...

Collectives™ on Stack Overflow

Calling Service in Angular2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related