you both are right.
this is the jobsData.load:
load() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get(this.jobsApiUrl)
.map(res => res.json())
.subscribe(data => {
this.data = data.data;
resolve(this.data);
});
});
}
the reason I am using Promise is because this part:
.subscribe(data => {
this.data = data.data;
resolve(this.data);
});
My API looks like this:
{ data: [{........}, {.........}], meta: pagination:{.....} }
I wanted the data part only… I tried doing this with Observables but I couldn’t access data in the .ts
load(): Observable<Jobs[]>{
return this.http.get(this.jobsApiUrl)
.map(res => <Jobs[]>(res.json()))
}
Also not to forget…data also has sub objects as well.
When I subscribe to this service:
ionViewWillEnter(){
return this.jobsData.load().subscribe(res => {
this.jobs = res;
console.log(this.jobs) //// Object {data: Array[10], meta: Object}
})
}
But I receive an error in the html side: *ngFor="let job of jobs"
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
If I change it to this : *ngFor="let job of jobs.data" : Cannot read property 'data' of undefined
OR this in .ts side: console.log(this.jobs.data[0]) ///// property 'data' does not exist on type 'Jobs[]'
Jobs[] is a model (jobs.ts) which contains some of the keys for the data part in the API :
export interface Jobs {
id: number;
position_title: string;
vacancy_number: string;
no_of_vacancies: number;
probation_period: number;
.
.
}
Any solution for this , thanx
