I have searched and done some API calling to show the data. But now when I run in browser or android device some time its showing, some times it’s not showing, meaning that data is not already loading in the screen.
Here is my two screen full code include API calling:
My api calling code under my src/provider/authservices.ts:
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = 'http://www.example.com/api/';
@Injectable()
export class AuthService {
data: any;
constructor(public http: Http) {}
categ(cat: any) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'categories.php', JSON.stringify(cat), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
allresources(allres: any) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'AllResources.php', JSON.stringify(allres), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
}
Next is my schudle.ts:
this.authService.categ(this.loginData).then((result) => {
this.loading.dismiss();
this.data = result;
if(this.data.status == 1)
{
this.Catdata = this.data.CatgeoryList;
for(let i=0; i<this.Catdata.length; i++) {
//console.log(this.Catdata[i].CategoryName);
}
}
else if(this.data.status == 0) {
}
}, (err) => {
this.loading.dismiss();
});
opndetailpage() {
console.log("button pressed");
//this.navCtrl.push(SpeakerListPage, ResourcePage);
this.navCtrl.push(SpeakerListPage).then(
response => {
console.log('Response ' + response);
},
error => {
console.log('Error: ' + error);
}
).catch(exception => {
console.log('Exception ' + exception);
});
}
my html :
<div class="item item-body no-padding" style="border-width: 0px !important;">
<div class="row no-padding" *ngFor="let data of Catdata;let i = index" (click)="opndetailpage()">
<ng-container *ngIf=" i % 2 === 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{Catdata[i].CategoryName}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{Catdata[i+1].CategoryName}}</span></div>
</div>
</ng-container>
</div>
</div>
Then now mydetail page .ts:
this.authService.allresources(this.resloginData).then((result) => {
this.loading.dismiss();
this.resdata = result;
if(this.resdata.status == 1)
{
this.resCatdata = this.resdata.SubjectList;
for(let i=0; i<this.resCatdata.length; i++) {
// console.log(this.resCatdata[i].FileName);
}
}
else if(this.resdata.status == 0) {
}
}, (err) => {
this.loading.dismiss();
console.log(err);
});
That’s it. Sometime if I navigate to detail page also, some time data are not showing. Am I calling the API wrongly or need to add some loaded data?
i din do like this. so for this only my data are not showing some times in my screen : ??
like below i din do. So only i am not getting continuous data or what?? please some one exaplain me what should i need to do now with my code.
[load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don’t have the data yet
return new Promise(resolve => {
// We’re using Angular HTTP provider to request the data,
// then on the response, it’ll map the JSON data to a parsed JS object.
// Next, we process the data and resolve the promise with the new data.
this.http.get(‘path/to/data.json’)
.map(res => res.json())
.subscribe(data => {
// we’ve got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data;
resolve(this.data);
});
});
}]