Create REST API with JSON Server and Consume in Angular 5 HttpClient using Ionic 3 Application

Simulating a custom backend REST service in order to bring required data in JSON or XML compatible format to the front-end application is one of the major requirement in front end development.

There are many options you can use in catering this requirement. You can setup a full backend server by using Node.js, Express, Mongoose and MongoDB or else you can use Grails 3 to build the REST Web Service. However this takes much time and will expend much of the developers’ time and resources.

Here in this blog post I am going to elaborate a simple approach that can be used to create your own REST API using JSON Server and consume in Angular 5 HttpClient using Ionic 3 Mobile Application. JSON Server is a simple project that helps you to setup a REST API with CRUD operations very fast. It can be found at https://github.com/typicode/json-server. In the following I have described how to setup JSON server, publish a sample REST API and how to consume the REST API in Angular 5 HttpClient using Ionic 3 Mobile Application.

A) Create A REST API with JSON Server

1. Installing JSON Server

JSON Server is available as a NPM package and thus the installation can be done by using the Node.js package manager.

npm install -g json-server

Here the -g option makes sure that the package is installed globally in the system.

2. Creating the JSON File

Now create a new JSON file with name db.json. This JSON file contains the data that should be exposed by the REST API. Following is the sample db.json file I created.

{

"users": [

{

"id": "EMP-001",

"first_name": "Chathurangi",

"last_name": "Shyalika",

"email": "chathurangi@innovera.com"

},

{

"id": "EMP-002",

"first_name": "Chamani",

"last_name": "Shiranthika",

"email": "chamani@innovera.com"

},

{

"id": "EMP-003",

"first_name": "Awanthi",

"last_name": "Balasuriya",

"email": "awanthi@innovera.com"

},

{

"id": "EMP-004",

"first_name": "Jaya",

"last_name": "Sampath",

"email": "jaya@innovera.com"

},

{

"id": "EMP-005",

"first_name": "Darshana",

"last_name": "Jayakody",

"email": "darshana@innovera.com"

}

]

}

This JSON structure consists of one users object which has five data sets assigned. Each user object is consisting of four properties: id, first_name, last_name and email.

3. Running the server

Start JSON server by executing the following command.

json-server --watch db.json

Here you will get the following result.

Here the file containing the JSON structure (db.json) is needed to be passed over as a parameter along with the command. Furthermore the  --watch parameter has to be used. By using this parameter we’re making sure that the server is started in watch mode which means that it watches for file changes and updates the exposed API accordingly.

Now open URL http://localhost:3000 in the browser and you will get the following result.

From the output you can see that the employees resource has been recognized correctly. Now you can click on the users link and a HTTP GET request to http://localhost:3000/users shows the following result:

JSON server automatically provides following endpoints.

GET/users GET/users /{id} POST /users PUT/users /{id} PATCH/users /{id} DELETE/users /{id}

It's possible to extend URLs with further parameter. E.g. you can apply filtering by using URL parameters like you can see in the following: http://localhost:3000/users/EMP-001 This returns just one users object as a result.

http://localhost:3000/users?first_name=Jaya

Or just perform a full text over all properties: http://localhost:3000/users?q=chamani@innovera.com

Now just have a look at the terminal or cmd. It will prompt with the API requests we made and the responses resulted as follows.

B) Create the Angular 5 HttpClient and Ionic 3 Application to consume the REST API

Before getting started, accomplish following three main tasks:

- Install or update the latest Node.js - Install or update Ionic 3 using following command

npm install -g ionic

- Optionally install or update Cordova if you're using it for run on the Android or iOS device

npm install -g cordova

1. Create the New Ionic 3 App

First, Open your terminal or cmd and then go to the projects folder. Type this command.

ionic start ionic3-angular5-rest blank

Go to the newly created app project folder.

cd ionic3-angular5-rest

Make sure everything is working properly run the app in labs mode, it will open automatically in the browser.

ionic serve --lab

Sometimes, the above command will not work due to Ionic App Scripts (app-scripts) versioning problem. It occurs due to the new versions of app-scripts. Just downgrade app-scripts version in the package.json file as follows.

"@ionic/app-scripts": "1.2.2"

to

"@ionic/app-scripts": "1.1.4"

And then run npm install again.

Or there is another way to solve this. Just use following command in order to run the app.

npm run ionic:serve

2. Install and Configure the Angular 5 HttpClient

Firstly, Update all '@angular' dependencies with the latest version.

npm install @angular/common@latest --save

npm install @angular/compiler@latest --save

npm install @angular/compiler-cli@latest --save

npm install @angular/core@latest --save

npm install @angular/forms@latest --save

npm install @angular/http@latest --save

npm install @angular/platform-browser@latest --save

npm install @angular/platform-browser-dynamic@latest --save

Now, your 'package.json' dependencies look like this.

"dependencies": {

"@angular/animations": "5.2.9",

"@angular/common": "^5.2.10",

"@angular/compiler": "^5.2.10",

"@angular/compiler-cli": "^5.2.10",

"@angular/core": "^5.2.10",

"@angular/forms": "^5.2.10",

"@angular/http": "^5.2.10",

"@angular/platform-browser": "^5.2.10",

"@angular/platform-browser-dynamic": "^5.2.10",

"@ionic-native/core": "4.6.0",

"@ionic-native/splash-screen": "4.6.0",

"@ionic-native/status-bar": "4.6.0",

"@ionic/pro": "1.0.20",

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.8",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

}

Next, open and edit 'src/app/app.module.ts' then add this import.

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

Then register it to '@NgModule' imports after 'BrowserModule', so it will look like this.

imports: [

BrowserModule,

HttpClientModule,

IonicModule.forRoot(MyApp)

],

3. Create Ionic 3 Service or Provider

Here I will implement the Angular 5 HTTPClient on the Ionic 3 service or provider.

Create the service or provider file by type this command.

ionic g provider Rest

It will create 'rest.ts' file and 'rest' folder inside 'providers' folder and also register it on 'app.module.ts'. Now, open and edit 'providers/rest/rest.ts' then replace 'http' import by new Angular 5 HTTPClient.

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

Also, replace 'Http' injection in the constructor.

constructor(public http: HttpClient) {

console.log('Hello RestServiceProvider Provider');

}

Next, I will create all REST API call inside 'rest.ts' file. Here use the REST API endpoint URL we developed earlier.

Add this line before the constructor.

apiUrl = ' http://localhost:3000’;

Add this functions after constructors.

getUsers() {

return new Promise(resolve => {

this.http.get(this.apiUrl+'/users').subscribe(data => {

resolve(data);

}, err => {

console.log(err);

});

});

}

4. Display Data in View

To display data in the view, open and edit `src/pages/home/home.ts` then add this import.

import { RestProvider } from '../../providers/rest/rest';

Inject the `RestProvider` to the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {}

Add variable for holds users data before the constructor.

users: any;

Create a function below the constructor for calling the users from the provider then fill users variable.

getUsers() {

this.restProvider.getUsers()

.then(data => {

this.users = data;

console.log(this.users);

});

}

Now, call that function inside the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {

this.getUsers();

}

Then, open and edit 'src/pages/home/home.html' then replace '<ion-content>' and it's content using this.

<ion-content>

<ion-list inset>

<ion-item *ngFor="let user of users">

<h1>{{user.id}}</h1>

<h2>{{user.first_name}} {{user.last_name}}</h2>

<p>{{user.email}}</p>

</ion-item>

</ion-list>

</ion-content>

If you prefer add some styles to the view in ‘src/pages/home/home.scss’ as follows.

page-home {

.toolbar-background {

background-color: blue;

}

}

Now, you can see the data on the browser like this.

Find the GitHub repository where I have uploaded the source code in this. Hope you got a clear idea through this article. If you have any questions just leave a comment below or mail me via chathurangijks@gmail.com.

Cheers!