how to serve json data during ng serve?

[kamran-pervaiz]

Hi,

I have created an angular 2 app and i am trying to create a service to send json data on UI.

Structure

• app
• app/data/countries.json

[
{ 'id': '1', 'name': 'United Kingdom' },
{ 'id': '2', 'name': 'United States' },
{ 'id': '3', 'name': 'India' },
{ 'id': '4', 'name': 'Pakistan' }
]

• factory/factory.service

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IDictionary } from '../shared/dictionary';

@Injectable()
export class FactoryService {
private countryUrl = "../data/countries.json";

constructor(private http: Http) {

}

getCountry(): Observable<IDictionary[]> {
    return this.http.get(this.countryUrl)
        .map((response: Response) => <IDictionary[]>response.json())
        .do(data => console.log("Countries: " + JSON.stringify(data)))
        .catch(this.handleError);
}

private handleError(error: Response) {
    console.log(error);
    return Observable.throw(error.json().error || "500 internal server error");
}

}

• IDictionary

export interface IDictionary {
[index: string]: string
}

• factory/factory-form.component.ts

export class FactoryFormComponent implements OnInit {

private model: Factory;
countries;
factoryStatuses;
productTypes;
risks;
private errorMessage: string;
private submitted = false;

constructor(private factoryService: FactoryService) {

}

ngOnInit(): void {
    this.countries = this.factoryService.getCountry()
        .subscribe(countries => this.countries = countries, error => this.errorMessage = error);
    this.factoryStatuses = this.factoryService.getFactoryStatusDummy();
    this.productTypes = this.factoryService.getProductTypeDummy();
    this.risks = this.factoryService.getFactoryRiskDummy();
}

}

I have noticed when i open the app in chrome, its missing the data folder although i put it in "app/data" in system.config.js

Error:

do i need to do some extra stuff to make data folder as part of my app?

[kamran-pervaiz]

update:

I changed the path to "app/data/countries.json" but and I can see something like below when debugging

private extractData(res: Response) {
let body = res.json();
return body.data || {};
}

I am not sure how to access private field _body. any idea?

[kamran-pervaiz]

It was not an issue with Angular-cli, it was issue with my code and solution is:

Replace below code:

this.countries = this.factoryService.getCountry()
.subscribe(countries => this.countries = countries, error => this.errorMessage = error);

with

this.factoryService.getCountry()
.subscribe(countries => this.countries = countries, error => this.errorMessage = error);

or

this.countries = this.factoryService.getCountry().error(...);

and use async pipe on html

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}