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

by - April 05, 2017

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

Share
Tweet
Pin
Share
Tags :

You May Also Like

0 comments