Utilizing promise and http.get to retrieve data from a JSON API in Wordpress.
Once the data is retrieved, it should be displayed on a page...
However, an error occurs when attempting to build the page due to the data not being available.
What steps can be taken to resolve this error?
This is the code for the service:
loadPost(id) {
return new Promise(resolve => {
this.http.get('http://blog.macg.xyz/api/get_post/?id='+id)
.map(res => res.json())
.subscribe(post => {
this.post = post;
resolve(this.post);
console.log(this.post);
});
});
}
And here's the controller:
export class PostPage {
public id:any;
public post: any;
public loading : any;
constructor(public postService: PostService, public navCtrl: NavController, params: NavParams, public loadCtrl: LoadingController) {
this.id = params.get("id");
// this.onPageWillEnter();
}
onPageWillEnter() {
// Start the process
this.showLoading();
}
showLoading() {
this.loading = this.loadCtrl.create({
content: "Please wait..."
});
// Display the loading page
this.loading.present();
// Retrieve the asynchronous information
this.loadPost();
}
loadPost(){
this.postService.loadPost(this.id) // service call occurs here
.then(data => {
this.post = data;
console.log(this.post);
this.hideLoading();
});
}
hideLoading(){
// Hide the loading component
this.loading.dismiss();
}
}
This is the HTML code snippet:
<ion-header>
<ion-navbar>
<ion-title>{{id}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
{{post.post.content}}
</ion-content>
Lastly, this is the encountered error: