Promises break the build of page

Hello there. I’m right now build an app to get a data from JSON API from Wordpress Blog based…

Yesterday I saw this for callthe API… Using promises like there…

Now, when I’m using the code for load a “post”, again, using promises. I got error Error In Build Pages

I’m already using the Loading to make the page wait the promises finished first… But still got the Error Build Page

Here’s my code on the ts file

onPageWillEnter() { this.showLoading(); }
showLoading() {
this.loading = this.loadCtrl.create({
content: "Please wait..."
});
this.loading.present();
this.loadPost();
}
loadPost(){
this.postService.loadPost(this.id)
.then(data => {
this.post = data;
this.hideLoading();
});
}
hideLoading(){this.loading.dismiss();}

and here the promises

loadPost(id) {	  
	  return new Promise(resolve => {
	    this.http.get('/api/get_post/?id='+id)
	      .map(res => res.json())
	      .subscribe(post => {
	        this.post = post;
	        resolve(this.post);
	      });
	  });
	}

Any help appreciated :smile:

a little hint: you do not have to create your promise on your own. You can add the additional toPromise function to an Observable, so you can call .toPromise() after your .map.

Can you give me the example of the code ?? I’m still new in the Ionic 2 :smiley:

Thanks

*note : I can write that code because I see the tutorial from Ionic 2 Blog :grin:

you need to import the toPromise function:

import 'rxjs/add/operator/toPromise';

then you can to something like this

return this.http.get(this.heroesUrl)
                  .toPromise()
                  .then(this.extractData)

It’s still give me error sir…

if you read the error you can find:

TypeError: self.context.post

So i think you are using this.post somewhere, where it is not defined.
Maybe in your loadPost function

All right… But, I can get the Output of the data…

Here’s the loadPost code

loadPost(){
	  this.postService.loadPost(this.id)
	  .then(data => {
	    this.post = data; //and this is the post variable
	    console.log(this.post); //I can see the post in here
	    this.hideLoading();
	  });
	}

Here’s the console *I get it when I’m turn of the {{post.post.content}} from the HTML

I’m little confused with the promises and the async data… Because it can show the form even when the data is not ready (since it using the async method)

But, I don’t know the alternative of this “async” way… Anyway… Thanks for giving a info about toPromise But I hope I can stcik to the manual promise method (because that’s what I know from the Ionic 1 :smiley:)

sry i meant the this.post in your service function

and there is no alternative to async handling of request… because request are async ^^

Did you mean this.post in my service not get the data ??

I don’t think so, because I can show it from this code in my post.ts file

loadPost(){
  this.postService.loadPost(this.id)
    .then(data => {
      this.post = data; //and this is the post variable
      console.log(this.post); //I can see the post in here
      this.hideLoading();
    });
}

I mean, that console.log(this.post); get the value from resolve(this.post) from my service, right ??

Here is the little proof that my service and the controller both get the data ^^

It can be loaded because I’m not using {{post.post.content}} on my post.html ^^

Sir, I just realize. My post on {{post.post.content}} Still empty when entering the page…

How to solve this ?
Why there’s different between this.post on my controller and {{post.post.content}} on my html ??

I don’t understand this :smiley:

Templates are evaluated before asynchronous requests have completed. You must either initialize post with a sensible dummy or guard against the case where it is not yet defined in your template, using for example the Elvis operator.

I’ve use the Elvis Operator

like this {{post?.post.content}}

But I still get the Error

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/post/post.html:5:21
ORIGINAL EXCEPTION: TypeError: Cannot read property 'content' of null

But, when I’m turn off this code {{post?.post.content}} and add a console.log(this.post) on my loadPost function on my page.ts it show the object like this

i think post is initialised in your component class.
But post.post not…
So post?.post does not work

Yeah… The post is initialized on my component class

post.post = variable post get the json object post… And Inside that post object, had content inside of it…

*see my json screen shot on my last reply…

So, what is the solution ?? I still not have it till now :joy:

maybe simply use {{post.post?.content}} ?

Finally :smiley:

the answer is {{post?.post?.content}} :joy:

Anyway, thank you so much sir @rapropos and @bengtler… That answer just pop out of my head :joy: