title: How to fetch json data in Angular 2+
body: <p>I'm trying to display a list with data fetched from a local json file. Here is how my service looks so far.</p>
  
  <p><strong>category.service.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class CategoryService {
    constructor(private _http: Http) { }
  
    getCategories() {
      return this._http.get('api/categories.json')
        .map((response: Response) =&gt; response.json())
        .do(data =&gt; console.log('All; ' + JSON.stringify(data)))
        .catch(this.handleError);
    }
  
    private handleError(error: Response) {
      console.log(error);
      return Observable.throw(error.json().error || 'Server error');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is how the <strong>Category Menu component</strong> where I inject it looks so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { CategoryService } from '../category.service';
  
  @Component({
    selector: 'app-category-menu',
    templateUrl: './category-menu.component.html',
    styleUrls: ['./category-menu.component.css']
  })
  export class CategoryMenuComponent implements OnInit {
    errorMessage: string;
    commerceName= `El baratón`;
    categoryName = `Bebidas`;
    categories: any = 'Not assigned yet';
    hasMenu?= true;
  
    constructor(private _categoryService: CategoryService) { }
  
  
    ngOnInit() {
      return this._categoryService.getCategories()
        .subscribe(
          categories =&gt; this.categories = categories,
          error =&gt; this.errorMessage = error
        );
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, the error I am getting in the console is a 404. For this project I have used the CLI version 1.0 and the categories.json file inside of the src/api/categories.json folder. </p>
  
  <p>What am I doing wrong here? </p>