title: Angular 2 return data from service is not availabe after RxJs subscribe
body: <p>In my map.service I have coded like this </p>
  
  <pre><code>loadAdminDataDiv (): Observable&lt;any&gt; {
       return this.http.get("static/data/data.json")
                        .map(this.extractData);
    }
  private extractData(res) {
  
        if (res.status &lt; 200 || res.status &gt;= 300) {
          throw new Error('Bad response status: ' + res.status);
        }
  
        //console.log(res.json());
        this.serviceData =(res.json()) ;
        return this.serviceData || { };
    }
  </code></pre>
  
  <p>Then injected inside a component as a provider and subscribed like this</p>
  
  <pre><code>getSubscribeData: any;
  getAllvaluesFromFiles() {
      this._mapService.loadAdminDataDiv().subscribe(data =&gt; {
        this.getSubscribeData = data;
  
      },
        error =&gt; { console.log(error) },
        () =&gt; {
          console.log(this.getSubscribeData);  // prints the data 
  
        }
      );
    }
  
  ngAfterContentInit() {
      this.getAllvaluesFromFiles();
      console.log(this.getSubscribeData); // prints Undefined
  
    }
  </code></pre>
  
  <p>Can anyone suggest me a work around with this problem ? My service is working but My subscribed data does not work outside of the subscribe method. I pointed out where I'm having problem. I need to use this <code>this.getSubscribeData</code> throughout my component as a global variable. I dont want to use shared service, Is that possible without using another service. A working code will be helpful :) </p>
  
  <p>And I have to load at least 7 more variable like this. Actually I need to use these variables to pass  to d3 objects and into leaflet map and it has to be after some required interactions. Lets say, I have to load leafletmap with this <code>this.getSubscribeData</code> so I will initiate the leaflet map inside the subscribe. but if I want to use this leaflet instance outside of the method what should I do?</p>