How to get data from observable in angular2

Question

I am trying to print the result of http call in Angular using rxjs

Consider the following code

import { Component, Injectable, OnInit } from '@angular/core';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
class myHTTPService {
  constructor(private http: Http) {}

  configEndPoint: string = '/my_url/get_config';

  getConfig() {

    return this.http
      .get(this.configEndPoint)
      .map(res => res.json());
  }
}

@Component({
    selector: 'my-app',
    templateUrl: './myTemplate',
    providers: [HTTP_PROVIDERS, myHTTPService],


})
export class AppComponent implements OnInit {

    constructor(private myService: myHTTPService) { }

    ngOnInit() {
      console.log(this.myService.getConfig());
    }
}

Whenever I tried to print out the result of getconfig it always return

Observable {_isScalar: false, source: Observable, operator: MapOperator}

even though I return a json object instead.

How would I print out the result of getConfig ?

Did you get the solution?

ramya
– ramya

2017-04-05 06:33:28 +00:00
Commented Apr 5, 2017 at 6:33 — ramya
– ramya, Commented Apr 5, 2017 at 6:33

Rakhat · Accepted Answer · 2017-04-17 08:47:17Z

125

You need to subscribe to the observable and pass a callback that processes emitted values

this.myService.getConfig().subscribe(val => console.log(val));

edited Apr 17, 2017 at 8:47

Rakhat

4,9615 gold badges43 silver badges51 bronze badges

answered Apr 4, 2016 at 5:41

Günter Zöchbauer

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

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

5 Comments

Pardeep Jain Over a year ago

its res.json() instead of res.json

Pardeep Jain Over a year ago

hmm. but have't mentioned it so post comment

Günter Zöchbauer Over a year ago

Not sure what you mean by your last comment. It's already in the code in the question. No deed to convert to JSON again when you subscribe.

Pardeep Jain Over a year ago

hmm i just wan to say we need to conver into .json() at the time or .map().

bmusical Over a year ago

console.log(JSON.stringify(val))

Rakhat · Accepted Answer · 2017-04-17 08:36:40Z

27

Angular is based on observable instead of promise base as of angularjs 1.x, so when we try to get data using http it returns observable instead of promise, like you did

 return this.http
      .get(this.configEndPoint)
      .map(res => res.json());

then to get data and show on view we have to convert it into desired form using RxJs functions like .map() function and .subscribe()

.map() is used to convert the observable (received from http request)to any form like .json(), .text() as stated in Angular's official website,

.subscribe() is used to subscribe those observable response and ton put into some variable so from which we display it into the view

this.myService.getConfig().subscribe(res => {
   console.log(res);
   this.data = res;
});

edited Apr 17, 2017 at 8:36

Rakhat

4,9615 gold badges43 silver badges51 bronze badges

answered Apr 4, 2016 at 5:49

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

2 Comments

rahularyansharma Over a year ago

What if service is taking time to return the data and you need to use the this.data in your next function ?

Pardeep Jain Over a year ago

then you can use aync/await or you can call your next function within the http service call. both ways should work.

Rakhat · Accepted Answer · 2017-04-17 08:46:53Z

18

this.myService.getConfig().subscribe(
  (res) => console.log(res),
  (err) => console.log(err),
  () => console.log('done!')
);

edited Apr 17, 2017 at 8:46

Rakhat

4,9615 gold badges43 silver badges51 bronze badges

answered Apr 4, 2016 at 6:10

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Collectives™ on Stack Overflow

How to get data from observable in angular2

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related