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

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

 

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

 

 

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