I've created an angular app which gets data from a json file. But I'm having issues with showing the data in html. A lot of variables are in dutch, I'm sorry for that. I'm also a bit new to all of this :)
This is my service:
import {Injectable} from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Afdelingen} from "./models";
@Injectable()
export class AfdelingService {
private afdelingenUrl = '/assets/backend/afdelingen.json';
constructor(private http: Http) {
}
getAfdelingen(): Observable<Afdelingen[]> {
return this.http.get(this.afdelingenUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {};
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {
let body = JSON.stringify({"afdelingsNaam": afdelingsNaam, afdeling: afdeling});
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post(this.afdelingenUrl, body, options)
.map(res => <Afdelingen> res.json())
.catch(this.handleError)
}
}
This is part of my json file:
{
"afdelingen": [
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.054,
"patientid": 10001,
"patientennaam": "Joske Vermeulen",
"reden": "Appendicitis",
"opname": "12/05/2017",
"ontslag": "28/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": false,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": true,
"width": 5,
"height": 5
},
{
"afdelingsNaam": "pediatrie",
"kamernummer": 3.055,
"patientid": 10002,
"patientennaam": "Agnes Vermeiren",
"reden": "Beenbreuk",
"opname": "18/05/2017",
"ontslag": "30/06/2017",
"behandelingstype": "nazorg",
"behandelingsomschrijving": "wondverzorging",
"behandelingsdatum": "10/06/2017",
"behandelingstijd": "10:20",
"vegitarisch": true,
"Opmerkingen": "",
"sanitair": true,
"kinderverzorgingsruimte": false,
"salon": true,
"hulp": false,
"width": 5,
"height": 5
}]}
The Component:
import {Component, OnInit, Input} from '@angular/core';
import {Afdelingen} from "../models";
import {AfdelingService} from "../afdeling.service";
import {PatientService} from "../patient.service";
@Component({
selector: 'app-afdeling',
templateUrl: './afdeling.component.html',
styleUrls: ['./afdeling.component.css']
})
export class AfdelingComponent implements OnInit {
afdeling: Afdelingen[];
errorMessage:string;
constructor(private afdelingService: AfdelingService, private patientService: PatientService) { }
ngOnInit() {
this.getData()
}
getData() {
this.afdelingService.getAfdelingen()
.subscribe(
data => {
this.afdeling = data;
console.log(this.afdeling);
}, error => this.errorMessage = <any> error);
}
}
and the html:
<ul>
<li *ngFor="let afd of afdeling">
{{afd.patientid}}
</li>
</ul>
As the error messages stated, ngFor
only supports Iterables such as Array
, so you cannot use it for Object
.
change
private extractData(res: Response) {
let body = <Afdelingen[]>res.json();
return body || {}; // here you are return an object
}
to
private extractData(res: Response) {
let body = <Afdelingen[]>res.json().afdelingen; // return array from json file
return body || []; // also return empty array if there is no data
}