Skip to main content

Ionic 2 Make Post Request To JSON API

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, I will show you how to make a post request in an Ionic 2 App. The app that we will be creating will be a simple bare bones app that will only have a button. Clicking on that button will make the HTTP call using the post method. As Ionic 2 uses Angular 2 and TypeScript things will be easy for us.

In one of my previous tutorials, we saw how you can use get a request to get data form and create a JSON feed reader in Ionic 2. In this tutorial, we will focus on the making post request.

Step 1)

We will start of by creating a new Ionic 2 project, we do that by issuing the following commands in the terminal/command prompt

Here we are using the blank template and using the --v2 option to get Ionic 2.

After navigating inside the project folder now let’s add Android and iOS platforms. We do that using the following commands.

Note that you can only add ios as a platform if you are using a MAC. Android can be added irrespective of the operating system that you are working on.

 

Step 2)

The app created by default will have the Cordova Whitelist Plugin. You can check that inside the plugins folder. If it for some reason it is not present there, you can add it using the following command.

 

Step 3)

Now let’s take a look at the backend api that we will be using in this app. I will be using the JSONPlaceholder API . The API a great tool to test your app against. As it is mentioned in the docs of the api here,¬† when we make the .post() request we will get the following data back

This will prove that the .post() actually succeeded.

Step 4)

As mentioned above, our view will only have a button. So open up src\pages\home\home.html and code it as follows

Here, we are just adding a button that when clicked will call the postRequest().

 

Step 5)

Now it’s time to code out TypeScript file, so open up src\page\home\home.ts and code it as follows

Here we are importing Http, Headers, RequestOptions on line 2. After that, we are injecting the http service into the constructor on Line 10.

On Line 13 we have our postRequest() function which will be called when the button is tapped. Let’s break down the code of the postRequest() function to understand it better. Inside our function we first have the following,

Here we are creating the header that will be passed in the post request. We are storing it RequestOptions in the options variable.

In the above, code we are creating an object called postParams and setting up some properties. This object is based on the JSONPlaceholder API. You can pass any data here that you want to post to the server.

Here, we are actually making the .post() request. Notice that the .post()method takes three parameters namely, the URL, post parameters and the header options.

In Angular 2, the .post() method will return an observable which we are subscribing to using  .subscribe() method. This method has success and callback functions respectively. The success function will receive the data, if any, back from the server. In the case of this tutorial, we will get the data that is mentioned in step 3.

Download Code:


Code Will Be Sent Via Email

 

Conclusion

Making post request using Ionic 2 is pretty simple and straight forward stuff. The only thing that you have to get your head around is creating post header. You can read more on this in this example in the Angular 2 documentation.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: