AngularJS 2 : Getting data from json file not working

Question

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.

Here are the files contents (all 3 files are located in the app/ folder):

hero.service.ts :

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<Hero[]>
    {
        return this.http.get(this.heroesUrl)
                .toPromise()
                .then(response => response.json().data)
                .catch(this.handleError);
    }

    private handleError(error: any)
    {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

hero.service.ts :

    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};
      }
  }

heroes.json :

    {
        "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"
        }]
    }

Error in the browser:

error in browser

Any help would be appreciated. Thanks!

Could you try to open the url to the JSON file (localhost:3004/app/heroes.json) in your browser? Just to see if it's really there! — Maximilian Riegler
– Maximilian Riegler, Commented Jul 18, 2016 at 8:41
@rinukkusu : Yes it's working fine, the json is there : imgur.com/K9IzTim — tkarra
– tkarra, Commented Jul 18, 2016 at 8:55
The error message says the URL is null. That's weird. Maybe you need to use something like stackoverflow.com/questions/37517183/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 18, 2016 at 9:07
@günter-zöchbauer : I tried adding the location to the HeroService constructor : constructor(private http: Http, location: Location) { location.go('/app');} to reach app folder, without success, is that the correct usage ? thanks — tkarra
– tkarra, Commented Jul 18, 2016 at 9:25

tkarra · Accepted Answer · 2016-07-18 10:11:20Z

17

Found it ! It was due to the InMemoryBackendService and InMemoryDataService used in main.ts file, that seem to 'redirect' the calls from http.get method. Commenting those lines from main.ts file resolved the issue :

    // Imports for loading & configuring the in-memory web api
    import { XHRBackend } from '@angular/http';

    //import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
    //import { InMemoryDataService }               from './in-memory-data.service';

    // The usual bootstrapping imports
    import { bootstrap }      from '@angular/platform-browser-dynamic';
    import { HTTP_PROVIDERS } from '@angular/http';

    import { AppComponent }         from './app.component';
    import { appRouterProviders }   from './app.routes';

    bootstrap(AppComponent, [
        appRouterProviders,
        HTTP_PROVIDERS
        /*,
        { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
        { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
        */
    ]);

answered Jul 18, 2016 at 10:11

tkarra

5513 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rodney Over a year ago

Ah yes... I had the same issue... cost me quite a few hours - thx

BBaysinger Over a year ago

This saved my evening. Thanks. I should note that this can occur from InMemoryWebApiModule, which is what it was in my case.

stefanbschneider Over a year ago

Is there any way to do this conditionally based on the configuration/environment that's being used?

Collectives™ on Stack Overflow

AngularJS 2 : Getting data from json file not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related