Angular 2 return data from service is not availabe after RxJs subscribe

Question

In my map.service I have coded like this

loadAdminDataDiv (): Observable {
     return this.http.get(\"static/data/data.json\")
                          


        

Answer 1

In this code

  ngAfterContentInit() {
    this.getAllvaluesFromFiles();
    console.log(this.getSubscribeData); // prints Undefined
  }

console.log(this.getSubscribeData) is actually before subscribe

subscribe() schedules an async call for Http to make when the current sync thread of execution is completed.
Then your console.log(...) is executed.
When then eventually the response from the server arrives, the callback you passed to subscribe(...) is executed.

To be able to execute some code when the response arrived you can use for example

  getAllvaluesFromFiles() {
    return this._mapService.loadAdminDataDiv()
    .do(data => {
      this.getSubscribeData = data;
    })
    .do(() => {
        console.log(this.getSubscribeData);  // prints the data 
    })
    .catch(error => { 
        console.log(error);
        throw error;
    });
  }

This way an Observable is returned

  ngAfterContentInit() {
    this.getAllvaluesFromFiles()
    .subscribe(data => {
      console.log(this.getSubscribeData); 
    })
  }

This way the calls are properly chained so that console.log(...) is executed after the data is available.