How to get the data from the server by using ionic 3 and angular 4 ?

Hai let we see the how to call the API from the server in ionic 3 and angular 4 with an example.

we will start by creating an app with the blank template, using ionic start

ionic start Appname blank


Creating a New Provider

            Let’s look at adding a new provider (also known as a service), which will be used to make an HTTP request to an API. We want to create a page, the CLI(Command Line Interface) makes this significantly easier by providing automatic provider generation, using ionic g. let’s create a new provider called PeopleService, using the CLI.

            ionic generate provider PeopleService

     This class will have the basic boilerplate code inside of a load method to make an HTTP request.

load() { if (this.data) { // already loaded data return Promise.resolve(this.data); } // don't have the data yet return new Promise(resolve => { this.http.get('path/to/data.json') .map(res => res.json()) .subscribe(data => { this.data = data; resolve(this.data); }); }); }

        If we modify our request to https://randomuser.me/api/?results=10, the results array in the response will contain ten users. Let’s put this in our PeopleService. We will need to make a couple of changes to the code the provider gave us. First, let’s put in the URL:

this.http.get('https://randomuser.me/api/?results=10')

        Currently, our code stores/returns the whole response. However, we only want to return the results array in the response. We’ll modify the .subscribe method

.subscribe(data => { this.data = data.results; resolve(this.data); });

           Now, our method, when called, will return a promise, which will resolve with an array of users when we get a response back from the API.

Now PeopleserviceProvider full code

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*  Generated class for the PeopleServiceProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html  for more info on providers and Angular DI.*/@Injectable()
export class PeopleServiceProvider {
  private data: any;

  constructor(public http: Http) {
    console.log('Hello PeopleServiceProvider Provider');
  }

  load() {
    if (this.data) {
      // already loaded data  

    return Promise.resolve(this.data);
    }

  return new Promise(resolve => {
        this.http.get('https://randomuser.me/api/?results=100')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data.results; //here results mean by array name 
          resolve(this.data);
        });
    });
  }

}

Home.ts

      Let’s take a look at calling our PeopleService and outputting the results as a list on our home page. First, inside src/pages/home/home.ts, we need to import our service

import {PeopleServiceProvider} from '../../providers/people-service/people-service';

   Next, in our @Page decorator, we will need to add our service as a provider.   

              @Page({
templateUrl: 'build/pages/home/home.html', providers: [PeopleServiceProvider] }) export class HomePage {

    Now, we can add a constructor to our page, create a people property, import the PeopleServiceProvider, and assign the PeopleServiceProvider to a property of the class.    

              export class HomePage {
public people: any; constructor(public peopleService: PeopleServiceProvider){ } }

      Let’s add a method to our HomePage class called loadPeople that will call our peopleService.load method and assign the result of the promise in a people property of the class.

               loadPeople(){
this.peopleService.load() .then(data => { this.people = data; }); }

Finally, we will call this method from our constructor and full code.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PeopleServiceProvider } from '../../providers/people-service/people-service';
import {Http} from '@angular/http';
/** * Generated class for the ChatHomePage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */
@Component({
  selector: 'page-chat-home',
  templateUrl: 'chat-home.html',
  providers: [PeopleServiceProvider]
})
export class HomePage {
  data: any;
  private people: any;


  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http,public peopleService: PeopleServiceProvider)

 {
    this.data = {};
    this. loadPeople()
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChatHomePage');
  }

  loadPeople(){
    
    this.peopleService.load()
      .then(data => {
        this.people = data;
      });
   
  }

} 

Home.html

          Here we going to list out users with their picture, first name, last name and email.we will accomplish this by looping through our people array property using ngFor.

<header>
     <ion-navbar navbar>
     <ion-title>
      Home
     </ion-title>
     </ion-navbar>
</header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{person.name.first}} {{person.name.last}}</h2>
      <p>{{person.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>


Here picture.thumbnail,name.first, email and name.last are calling form the API.



Serve

             Finally, in the CLI, we’ll run ionic serve to view our app in the browser:

                           ionic serve          

  

            This CLI is used to check the project in the localhost browser


This is my project output.