Retrieving Static JSON data through HTTP Module

We are learning how to list blog or data and images from the server. This app we are using angular Http service component to retrieve local a static JSON file from local server and image from https://source.unsplash.com. We are not using ionic native HTTP plugin.
We will learn how to call a REST API using Http service. Where our API endpoint is just a static JSON file located in our local machine.

Step 1: First we need to setup a local server and we have to create static a JSON file.
>>sudo npm install -g http-server
>>mkdir TestData
>>Inside TestData directory, we will create file test.json and add the following code in the test.json

Run the local server in our command line prompt
>>http-server –cors=Access-Control-Allow-Origin

Check our browser to see if our server is running
http://localhost:8080/TestData/test.json

Step 2: ionic start MyRestbackend blank –v2, we first add following code in home.html

<ion-header> ...</ion-header>
 
<ion-content padding>
  <ion-card #myCard *ngFor="let item of quotes.data">
    <img [src]='"https://source.unsplash.com/category/" + item.category + "/600x390"' [height]="myCard.clientWidth * 390 / 600"/>
    <ion-card-content>
      <ion-card-title>{{ item.title }}</ion-card-title>
      <p>{{ item.description }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

We will add following code in home.ts of our app.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {QuoteService } from '../../services/quote';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public quotes: QuoteService) {
    this.quotes = quotes;
    this.quotes.getQuotes();
  }
}

Step 3: Now we will create service file called quote.ts, where we will call the local backend server to get JSON content using the getQuote() method, it is the main place where the HTTP request is made. First, we need to import Injectable and Http 
@Injectable decorator is used to allowing other pages and components to use QuoteService as a dependency.

>mkdir ./src/services or
>> ionic g provider name-of-service i.e ionic g provider quote
We will add following code in quote.ts

import { Injectable} from '@angular/core';
import { Http } from '@angular/http';
 
@Injectable()
export class QuoteService{
    private http: any;
    public data: any;
 
    constructor(http: Http){
        this.http = http;
    }
     
    getQuotes(){
        this.http.get("http://localhost:8080/MockRest/test.json")
        .subscribe(res => {
            this.data = res.json();
            console.log(this.data);
        }, error => {
            console.log(error);
        })
    }
}

 

Http will return an observable object so that we can subscribe to the object. ES6 introduce new concept arrow function in our case res => {}. No need to define the name of the function. In addition, it automatically passes the res parameter in this case.

Note: We have to declare import { QuoteService } from ‘../services/quote’; as provider and import { HttpModule } from ‘@angular/http’; as external module.