Fetch and Parse JSON data from web service in Ionic 2 app using Angular 2

Fetch and Parse JSON data from web service in Ionic 2 app using Angular 2

In this tutorial we are introducing web service calling using Angular2 and will learn how to Fetch & Parse JSON data in Ionic 2 application using angular 2.

For this we  create a  blank ionic2 application.

We have already discussed steps to create ionic 2 app in our previous tutorial.

To create ionic 2 app write on terminal


$ ionic start JsonProviderExample blank --v2

it will takes few minutes
As iOS project is created by default and you have to add android project, for it navigate to project directory


$ cd JsonProviderExample

Then add android platform


$ ionic platform add android

Now our project is ready to work, open it in WebStorm

First add a provider by writing below command at WebStorm terminal,


$ ionic g provider HttpProvider

It will generates http-provider.ts in a newly generated directory named providers.

Take a look at HttpProvider.ts in below image

Fetch & Parse JSON data in Ionic 2

Add following method in HttpProvider.ts

getJsonData(){
  return this.http.get('https://www.reddit.com/r/worldnews/.json').map(res => res.json());
}



Here http.get is used to fetch data from web service and map is used to manipulate data. Json() is called on the response to return data.

Now import HttpProvider in Home.ts

import {HttpProvider} from '../../providers/http-provider';

Add providers tag in @Component Decorator

providers:[HttpProvider]

Then in HomePage’s constructor inject HttpProvider by using angular2 dependacy injection

Updated constructor will look like this

constructor(public navCtrl: NavController, private httpProvider:HttpProvider) {
  
}

 

now call getJsonData method of HttpProvider

getdata(){
  this.httpProvider.getJsonData().subscribe(
    result => {
      this.newsData=result.data.children;
      console.log("Success : "+this.newsData);
    },
    err =>{
      console.error("Error : "+err);
    } ,
    () => {
      console.log('getData completed');
    }
  );
}

and call getdata() in home’s contructor.

 

Now we are going to create a loading spinner that will be displayed during web service data fetching. For this purpose we used ionic2’s “LoadingController”.

First we import LoadingController and then inject it in Constructor and initialize loading variable.

 

this.loading = this.loadingCtrl.create({
  content: `
  <ion-spinner ></ion-spinner>`
});

 

In getdata() we first display loader and after data fetched it will be dismissed.

Updated home.ts will look like this

Fetch & Parse JSON data in Ionic 2 

Also override sass variable of LoadingController to display transparent loader without any default white container.

For this add below lines in theme/variable.scss

// App iOS Variables
$loading-ios-background : transparent;
$loading-ios-box-shadow : transparent;
$loading-ios-spinner-color : white;

// App Material Design Variables
$loading-md-background : transparent;
$loading-md-box-shadow : transparent;
$loading-md-spinner-color : white;

Put below html in home.html


<ion-header>
<ion-navbar>
<ion-title>
World News
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<ion-list >
<ion-item text-wrap *ngFor="let item of newsData" >
<p >{{item.data.title}}</p>
</ion-item>
</ion-list>
</ion-content>

To check result write at terminal


$ ionic serve –lab

OUTPUT

 

Fetch & Parse JSON data in Ionic 2
OUTPUT

 

In this Tutorial we simply fetch & parse JSON data in Ionic 2 (using data of World News) web service, which is manipulated and parse in angular2 and then we showed the result  in a ionic 2 multiline list.

Download Code

9 thoughts on “Fetch and Parse JSON data from web service in Ionic 2 app using Angular 2

  1. Hi, Thanks for such a great tutorial….. I am new to Ionic framework and was wondering how i can add a loading component (spinner) as the http request gets data from the web api and make the spinner disappear once the app load all the data. Like just to block user interaction with the app as it is fetching the data.

  2. Great HTTP is working thank you . How to pass the value in get function dynamically? For Eaxample

    getJsonData(worldnews){
    return this.http.get(‘https://www.reddit.com/r/+worldnews+/.json’).map(res => res.json());
    }

    pass the get value in worldnews or localnews. How do i change this?

  3. Hi, I have problem with ionic 2 angular http get, it loads the same data regardless there are some changes from mysql database, Is the any means of making it dynamic? How? I heard it may be cached, then I don’t know where to put cache-view=”false” in ionic 2. I used to put http provider for getting JSON results in the same file with subscribe method, not like u did, let’s me try your way above of separating httpProvider on it’s own ts file maybe it will work, but hopefully u can help me if got it

  4. If the result is only one and i don’t wanna loop through ngfor, what should i do to print the result ?

    1. As your json service has tag table so In getdata() function replace following line

      this.newsData=result.data.children;
      with
      this.newsData=result.table;

Leave a Reply

Your email address will not be published. Required fields are marked *