title: http with Observable in Angular 2 cant use data
body: <p>i am new to angular 2 and to observables but i wanted to give it a shot. So i have installed the angular-cli and made a simple test project.</p>
  
  <p>All i wanted it to do is read a json file and work with the data inside of a component (the first intention was to make a service but i wanted to start on a low basis).</p>
  
  <p>So i have created a json file in the assets/json folder (testjson.json):</p>
  
  <pre><code>{
    "teststring": "test works"
  }
  </code></pre>
  
  <p>then i have imported the http from angular and the rxjs map stuff inside of my content.component.ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.css']
  })
  export class ContentComponent implements OnInit {
  
    title: string = "Default";
    data;
  
    constructor(private http:Http) {
      http.get('assets/json/testjson.json').map(res =&gt; res.json()).subscribe(data =&gt; {this.data = data; this.title = data.teststring; console.log(this.data);});
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>So far so good, the app prints out the following:</p>
  
  <pre><code>app works!
  
  test works [object Object]
  </code></pre>
  
  <p>But i want to use this data in the whole component, not only in the constructor. but if i try to console.log "this.data" outside of the constructor (inside the ngOnInit function), it prints undefined in the console.</p>
  
  <p>I know, that it must have something to do with asynch loading but unfortunately i have no clue how to tell the app to wait until this.data is filled.</p>
  
  <p>I hope you can help me with that. Of course in the future i want a service which does that kind of stuff and more than one component should grab data from it.</p>
  
  <p>Thanks in advance!</p>