title: AngularJS 2 : Getting data from json file not working
body: <p>I am trying to get the json data from an Angular service hero.service.ts. When using the fake http API inMemoryDataService, everything works fine and I am getting the json data from the in-memory-data.service.ts file. But when I try to get the data from a real json file, it does not work and I am getting an error 'collection not found' in the browser.</p>
  
  <p>Here are the files contents (all 3 files are located in the app/ folder):</p>
  
  <p><i>hero.service.ts :</i></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, Http , Response} from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  import { Hero } from './hero';
  
  @Injectable()
  export class HeroService {
  
      private heroesUrl = 'app/fakeListOfHeroes';  // URL to web api
      //private heroesUrl = 'app/heroes.json'; // URL to JSON file
  
      constructor(private http: Http) { }
  
      getHeroes(): Promise&lt;Hero[]&gt;
      {
          return this.http.get(this.heroesUrl)
                  .toPromise()
                  .then(response =&gt; response.json().data)
                  .catch(this.handleError);
      }
  
      private handleError(error: any)
      {
          console.error('An error occurred', error);
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p><i>hero.service.ts :</i></p>
  
  <pre><code>    export class InMemoryDataService {
        createDb() {
          let fakeListOfHeroes = [
          {id: 11, name: 'Mr. Nice'},
          {id: 12, name: 'Narco'},
          {id: 13, name: 'Bombasto'},
          {id: 14, name: 'Celeritas'},
          {id: 15, name: 'Magneta'},
          {id: 16, name: 'RubberMan'},
          {id: 17, name: 'Dynama'},
          {id: 18, name: 'Dr IQ'},
          {id: 19, name: 'Magma'},
          {id: 20, name: 'Tornado'}
          ];
          return {fakeListOfHeroes};
        }
    }
  </code></pre>
  
  <p><i>heroes.json :</i></p>
  
  <pre><code>    {
          "data": [{
              "id": 11,
              "name": "Mr. Nice"
          }, {
              "id": 12,
              "name": "Narco"
          }, {
              "id": 13,
              "name": "Bombasto"
          }, {
              "id": 14,
              "name": "Celeritas"
          }, {
              "id": 15,
              "name": "Magneta"
          }, {
              "id": 16,
              "name": "RubberMan"
          }, {
              "id": 17,
              "name": "Dynama"
          }, {
              "id": 18,
              "name": "Dr IQ"
          }, {
              "id": 19,
              "name": "Magma"
          }, {
              "id": 20,
              "name": "Tornado"
          }]
      }
  </code></pre>
  
  <p><i>Error in the browser:</i></p>
  
  <p><a href="http://i.stack.imgur.com/qancX.png" rel="noreferrer">error in browser</a></p>
  
  <p>Any help would be appreciated. Thanks!</p>