Every application needs to interact with the server in order to send request data and receiving the corresponding data for the request. Whenever you start building an application, every developer thinks of how to make the HTTP request to the server to receive data. This is the core operation every of every application.

Ionic 4 offers built-in functions to do HTTP request. You can make an HTTP request in many ways. The most used methods are

1. GET Request
2. POST Request

In this tutorial, I will show you, how to make the HTTP GET method call using the Random User API in Ionic 4. You can easily get more open REST API on the internet for free. This API is used for just a demonstration purpose. You can use any REST API for your practice.

I will show the HTTP Post example in another tutorial using the Ionic 4.

The random user API URL is given below.

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

When you load the above URL on the browser, it will show the five random user information which is collected on social media. 

You can modify the results parameter value, to get more users information. If you look at the output format, it is a JSON format. So we can easily process the JSON format using the Angular7-Ionic4.

Before working with any REST API, you must study and understand the format of the JSON result. Many developers failed to understand the JSON format. Then they will end up with some error. If you want to extract data from the JSON result and display the data, you must have through understanding the JSON result format. So my advice is to practice many JSON result format to work faster. Actually, JSON is a complex format for complex data.

Enough theory. Let's jump to do the HTTP GET request. I will explain everything as step by step tutorial.

Preview of HTTP GET Example.

Step1.

Import the HttpClientModule to the app.module.ts file

import { HttpClientModule } from '@angular/common/http';

Then put an entry to the imports section of the app.module.ts file.

imports: [ HttpClientModule ]

The HttpClientModule provides an interface to make HTTP calls. So you must import this module to app.module.ts file or else you encounter error.

Step2.

Now go to the home.page.ts file and import HTTP client class.

import { HttpClient } from '@angular/common/http';

The HttpClient class offers get() and post() function to make the get and post method calls. Create an object reference using the constructor.

constructor(public http: HttpClient){}

Step3.

To make HTTP get request use the below code.

this.http.get('https://randomuser.me/api/?results=10').subscribe(data=>{
//process the json data
console.log(data)
})

In the above code, you can pass any get supported URL to receive the json data. If you want to pass parameters as an object, then you can use params property like below in the code.

this.http.get(
'https://randomuser.me/api/?results=10',
{params: {id:2}
).subscribe(data=>{
//process the json data
console.log(data)
})

Step4.

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

The user's information is stored in the result key of the JSON data. So you can get all the users using the below code.

'https://randomuser.me/api/?results=10').subscribe(data=>{
//process the json data
this.usersList=data["results"]
})

Declare usersList as an array variable in the home.page.ts file.

usersList:any[]=[]

Step5.

You can display the received the user's data using the below HTML code.

 

<ion-list>
   <ion-list-header color="tertiary">
    <ion-label>Random Users List</ion-label>
   </ion-list-header>
    <ion-item *ngFor="let x of usersList;let i=index" >
      <ion-avatar >
       <img [src]="x.picture.large">
      </ion-avatar>
      <ion-label>
       <h3>{{x.name.title}}. {{x.name.first}}</h3>
       <p>{{x.email}}</p>
       <p>{{x.registered.date}}</p>
      </ion-label>
     </ion-item>
   </ion-list>

Paste the above code in the home.page.html file. 

usersList is an array, which contains users information. Here we using the ngFor to iterate all the data.

All the codes are tested using Ionic 4. And the code works fine.

Get full code using the below link.

https://github.com/bharathirajatut/ionic4/tree/master/http-rest-api-get-method-example-random-users

I hope this tutorial is useful to you. Please give us a star in git repo using the above link, if you find the tutorial is useful to you.