Creating Ionic 2 JSON API Feed Reader

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

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 randomuser.me Api the will give us data back in JSON format which can be seen http://api.randomuser.me

 

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

  • iamDoerrr

    Hello,
    thank you for the tutorial. I am a absolut beginner to ionic 2 and searched a lot for a tutorial to read a json file.
    When i try your sample and make the “ionic serve” i get a syntax error ( SyntaxError: C:/Users/thewe/Desktop/apps/http2/app/pages/page1/page1.js: Unexpected token (10:18) while parsing file: C:UserstheweDesktopappshttp2apppagespage1page1.js) in the console (tested beta 20 – 23). the Syntax error beginn when i add the constructor(http: Http){…}
    I think i have tested now all Ionic 2 hhttp samples i find in the internet. I have always the same problem with the Syntax error.
    Have you any idea to point me to the right direction?
    Thank you in advance and
    best Regards
    iamDoerr

    • yes. I am getting the same problem. Ionic2 and angular 2 are still in Beta release. There are changes happening almost every other day..
      As i have read Angular 2 will get it’s first release in the next month and Ionic2 won’t be too far behind.

      The code for http calls in angular 2 as seen here https://angular.io/docs/js/latest/api/http/Http-class.html is correct but some issue might be with the framework. So there is nothing you can do but wait for a stable release.

      I will be releasing full course here as well as in YouTube once things get more stable.

      As you are a beginner in Ionic 2 i recommend you start off by learning angular2 first.

      Regards.

      • iamDoerrr

        Hello,
        thank you for your answer. Now, that i know you have the same problem i am calmed down and wait 🙂 and will use the time to learn Angular 2 first.
        Thanks and best Regards
        iamDoerr

  • Yusri Aja

    i am stuck on ordered list, i found ul li in ionic.app.css were disabled, how to override them

%d bloggers like this: