Consume Json file from Service in Angular 2

Question

I have a service. In the constructor:

export class Service {

  _data: any

  constructor(private http: Http) {
    this.http
      .get('../assets/my_json_file.json')
      .map(x => x.json() )
      .subscribe( (data) => 
        this._data = data
      )
    console.log(this._data)
  }

The console.log returns undefined although it does show data if the console.log is moved into the function passed to subscribe.

My goal is to have a number of functions getStuff() in the service, callable by the app at ngOnInit with values for dropdown menus and stuff

Seen this but did not help figure out what went wrong

You cannot using it like that. The *http* is asynchronous and you want to use it synchronous. You can have *getStuff* functions in the service, but you need to start calling those functions when the data is ready, this can be done only by having another subscriber in the app component. So it doesn't matter that it's a *json*, the data is fetched with the same *http* as it was from a server. — Tiberiu Popescu, May 22 '16 at 23:46

score 6 · Accepted Answer · edited May 23 '17 at 12:17

this.http.get('../assets/my_json_file.json') is async, which means that a call to the server is scheduled for later execution and when the response from the server arrives eventually the callback passed to .subscribe(...) will be called with the response. "scheduled" means a task will be added to the event queue for later execution when the previously scheduled tasks are done.

After the http.get(...) call is scheduled console.log(this._data) will be executed. This is before the call to the server is even initiated.

The http.get(...) call is also only scheduled when the observable returned by http.get(...) is subscribed to because observables are lazy.

Using map(...) instead of subscribe(...) returns an Observable instead of a Subscription which allows the user of your service to chain it's own code to response events.

@Injectable()
export class Service {

  _data: any

  constructor(private http: Http) {}

  getData() {
    this.http
      .get('../assets/my_json_file.json')
      .map(x => x.json() )
      .map( (data) => 
        this._data = data
      )
    console.log(this._data)
  }
}

In a component you can use it like

export class MyComponent {
  constructor(service:Service) {
    // `subscribe` actually initiates the call to the server
    service.getData().subscribe(result => console.log(result));
  }
}

See also What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

This way you can already initiate the call to the server when the service is instantiated, not only after the component that uses the service subscribes.

Consume Json file from Service in Angular 2

1 Answers1