This tutorial explains you, how to explore the large complex JSON data and display the extracted data in the Ionic2 page. Don't worry about how to create or get the large complex JSON data REST API, the randomuser.me offering us the random large complex JSON data. So you can use this URL to get random JSON data.

Preview Uisng the Browser.

Execute the below URL on your browser.

https://randomuser.me/api/?results=2

The above URL will return only two records. Why because we mentioned the returning result to be two. You can change the returning result size by passing your required records size. If you want ten records, then use the below URL.

https://randomuser.me/api/?results=10

The above URL returns ten records. The data is very complex. It contains two root nodes. They are

1. results
2. info

The results hold the user's information. If you want to view the data in the tree format, go to the below URL.

https://codebeautify.org/jsonviewer

Copy paste your JSON data, which is generated from the above URL, in the left pane. And click the tree viewer to view the data in the tree format.


The results had ten records, which contains
1. gender
2. name
3. location
4. email etc.

We are going to unpack this data. Consider the JSON data is stored on the return_data variable. If you want to extract gender, then you have to write like this.

return_data.results[0].gender

The result is a root node, which contains ten records. So we extracting the first record gender info using the above code.

So enough theory. Let's do this using the Ionic2 GET request. 

Create a new Ionic 2 project using.

ionic start pro_name blank --v2

To preview each and every change you made to the code, run the below command.

cd proj_name
ionic serve --lab

To do AJAX GET request, we need the HTTP library. Import the HTTP library to the home.ts file.

import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

If you face the no provider for HTTP problem use the below link to solve this problem.

https://ampersandacademy.com/tutorials/ionic-framework-version-2/no-provider-for-http-no-provider-for-connection-backend

Now create an object reference to the Http using the constructor.

constructor(public http:Http) {

}

Then create a function, which will call the URL using the Http get method. Create a user variable to store the user information.

users:any
load()
{
this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
this.users=res.results;
}, (err) => {
alert("failed");
});
}

Now create a button in the home.html with the click event to call the above function.

<button (click)="load()" ion-button>Load</button>

Then create an ionic list to iterate and display the user information.

<ion-list>

<ion-item *ngFor="let x of users" >
<ion-avatar item-start>
<img src="{{x.picture.large}}">
</ion-avatar>
<h2>{{x.name.title}}. {{x.name.first}}</h2>
<p>{{x.email}}</p>
<ion-note item-end>{{x.registered}}</ion-note>
</ion-item>

</ion-list>

That's all. You are done. Now preview the application using the browser. We already used the ionic serve command.

Below is the Ionic 2 information, while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

home.html file source code

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<button (click)="load()" ion-button>Load</button>

<ion-list>

<ion-item *ngFor="let x of users" >
<ion-avatar item-start>
<img src="{{x.picture.large}}">
</ion-avatar>
<h2>{{x.name.title}}. {{x.name.first}}</h2>
<p>{{x.email}}</p>
<ion-note item-end>{{x.registered}}</ion-note>
</ion-item>

</ion-list>


</ion-content>

home.ts file source code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public http:Http) {

}
users:any
load()
{
this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
this.users=res.results;
}, (err) => {
alert("failed");
});
}
}