title: Fetching a json file in Angular 2
body: <p>There are few solutions on SO, but apparently they are deprecated. Angular 2 changes all the time...</p>
  
  <p>Im trying to fetch a json file to my file.</p>
  
  <p>There's a <code>items.json</code> file.</p>
  
  <p>I'm wondering if I am able to make this work in just one file? I mean, just inside the <code>app.component.ts</code>? <code>app.component.ts</code> file actually looks like:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http } from '@angular/http';
  import { Injectable }     from '@angular/core';
  
  @Component({
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  @Injectable()
  export class AppServices{
  
    constructor(private http: Http) {
      let obj;
       this.getJSON().subscribe(data =&gt; obj=data, error =&gt; console.log(error));
    }
  
    public getJSON(): {
      return this.http.get("./items.json")
        .map((res:any) =&gt; res.json())
    }
  }
  
  export class AppComponent {
      let items = getJSON();
    }
  }
  </code></pre>
  
  <p><strong>Or maybe</strong> I have to include a <code>app.service.ts</code> file? And drop there the code fetching the json? It was so easy to do it in Angular1, why they made this so complicated...</p>
  
  <p><strong>I'm looking for the shortest solution as it is possible</strong> I will upvote every answer. Thank u in advance</p>
  
  <p><strong>EDIT</strong> 
  I got another code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Component({
    selector: 'watchlist',
    templateUrl: './watchlist.component.html',
    styleUrls: ['./watchlist.component.css']
  })
  
  
  export class WatchlistComponent {
  
    data;
  
    constructor(private http:Http) {
      this.http.get('items.json')
        .subscribe(res =&gt; this.data = res.json());
    }
  
  }
  </code></pre>
  
  <p>How to load this data into my items variable?</p>