You can do so by creating a service provider
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class yourService {
constructor(public http:Http) {}
getData() {
return this.http.get("YOUR_PATH_TO_THE_JSON_FILE")
.map((res:Response) => res.json().YOUR_JSON_HEADER); //records in this case
}
}
Define the service in your ts constructor and call the method to parse through the data
this.yourService.getData().subscribe((data) => {
console.log("what is in the data ", data);
this.myjsondata = data;
});
Make sure to define the service provider in app.module.ts
For promises as in your case modify the code as follows:
In your service.
load() {
console.log('json called');
return new Promise(resolve => {
this.http.get('assets/data/patient.json').map(response => {
this.data = response.json();
resolve(this.data);
});
});
}
Here you are getting data and resolving to promise. To use this in html you have to get the data in your component page as follows.
this.yourService.load().then((data) => {
console.log("what is in the data ", data);
this.patdata= data;
});
You can now use the patdata in your html
<h1> {{patdata | json}} </h1>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…