Creating Ionic 2 JSON API Feed Reader

Reading a feed off of an API is an essential task that most modern apps perform.In this tutorial, we will take a look at how to get JSON data from a remote Api and then create a list with that data in Ionic 2.

Step 1) Create A New Ionic App 

We will create a fresh ionic 2 app with a blank template by issuing the following commands

After navigating into the app directory we will add Android and iOS platforms as follows


Step 2) Adding Whitelist Plugin

We will be making http calls in our app for this to work we need to add the Cordova Whitelist plugin. We will run the following command to add the plugin

Step 3) Data Api

We will use the Api the will give us data back in JSON format which can be seen


Step 4) Creating Our View

In this step, we open up src\pages\home\home.html file and create a list in it as shown

Here we are creating a list using the ion-list tag on line 10, inside it we are creating list items by the ion-item tag.

As shown on line 11 we are using *ngFor directive which gets the array of objects and loops over each individual object by storing it in a local variable called item. This item variable has the data that we are using the dot notation as shown between the double-curly braces {{}}. We will  get the data from the API in the next step.

As we see in line 11 we have a click handler that will call itemClicked() function when any item is clicked / Tapped. Notice inside the itemClicked($event,item) function we are passing $event, which is the event object and will have the data related to the click event. And we are also passing the item object as the parameter, by doing so we can use the item that was tapped on in our javascript.

On line 19 we are showing an icon using ion-icon tag. We are using the *ngIf directive to create a condition to display a name='woman' icon if the item.user.gender=='female' and we are doing the same for item.user.gender=='male' on line 20.

On line 23 we are creating a button and we are giving it color='danger' attribute that will apply one of the predefined styles of Ionic to the button. We are also wiring up a function buttonClicked() to the button’s click event.


Step 5) Making http Calls In Ionic 2

Here we will understand how to get the data from the remote API that we saw in step 3, for that we will need to make http call to get the data. We can do that by importing the http class like so

Here we are importing the Angular 2 http class from @angular/http. To use this object we will need to inject it in our constructor function as follows

After injecting it to the constructor function now we can use  this.http to make http calls and we do that on line 3, we use the .get() method as shown. On line 6 we are binding the data that we get back from the API to the items object. We used this items object in our view with *ngFor directive.

Let’s now take a look at the function that we wired up in our view we can code the itemClicked() function as follows

As we passed the $event object and itemData which is the object that was tapped on in our view we can now use them any way we want in our JavaScript, here I am just logging them to the console.


So the full code of the app\pages\home\home.ts file is as follows


 Step 5) Enabling Cors

If you are testing your app in the browser you will get a CORS error, which is a normal thing. This does not happen if you are running you app in an emulator or a device. To by-pass the CORS error, take a look at my post here.


Step 6) Building Ionic 2 App

Now we can run this app in our browser with the serve command

If you want to run it on a device we can use the run command, but you need to have a device which is connected to your computer and the phone needs to have debugging mode enabled.

Send Code Via Email (No Spam):

Code Will Be Sent Via Email


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 @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

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. :-)