Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | fetch data from API using HttpClient

  • Last Updated : 14 May, 2020

There is some data in the API and our task here is to fetch data from that API using HTTP and display it. In this article, we will use a case where the API contains employee details which we will fetch. The API is a fake API in which data is stored in the form of JSON (Key: Value) pair.

API: API stands for Application Programming Interface, which is a software intermediary that allows two applications to communicate to each other.

Angular offers HttpClient to work on API and handle data easily. In this approach HttpClient along with subscribe() method will be used for fetching data. The following steps are to be followed to reach the goal of problem.

  • Step 1: Create the necessary component and application.
  • Step 2: Do the necessary imports for HttpClient in module.ts file.
    import { HttpClientModule } from '@angular/common/http';
    
    @NgModule({
      declarations: [
      ],
      imports: [
        HttpClientModule,
      ],
      providers: [],
      bootstrap: []
    })
    
  • Step 3: Do the necessary imports for HttpClient in component.ts file.
    import {HttpClient} from '@angular/common/http';
    
    export class ShowApiComponent implements OnInit {
      constructor(private http : HttpClient){
    
       } 
      }
    
  • Step 4: We get Response from API by passing API url in get() method and then subscribing to the url.
    this.http.get('API url').subscribe(parameter)

    The Response of the API is stored in a variable from which data can be accessed.

  • Step 5: Now data array need to be showed using HTML. A Table is used in which rows are added dynamically by the size of data array. For this, rows are created using *ngFor then data is showed from each row.

Prerequisite: Here you will need an API for getting data. A fake API can also be created and data can be stored – “https://www.mocky.io/”.

Example: Here for example, we already have a fake API which contains employee data which we will fetch
API: “http://www.mocky.io/v2/5ea172973100002d001eeada”



Steps to display the data:

  • Step 1: Required Angular App and Component(Here show-api component) is created
  • Step 2: For using HttpClient for our app, HttpClientModule is imported to app.module.ts

    app.module.ts:




    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
      
      
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AddInputComponent } from './add-input/add-input.component';
    import { ShowApiComponent } from './show-api/show-api.component';
      
    @NgModule({
      declarations: [
        AppComponent,
        ShowApiComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  • Step 3: In Typescript file of component(Here show-api.component.ts) import HttpClient. HttpClient helps to render and Fetch Data.The Employee Details API is used to get data. We get Response from API by passing API url in get() method and then subscribing to the url. The Response of the API is stored in a variable named li from which data array is further stored in an array named lis here. The lis array will help us show the data. A user defined function is called when response comes to hide the loader.
    show-app.component.ts:-




    import { Component, OnInit } from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    @Component({
      selector: 'app-show-api',
      templateUrl: './show-api.component.html',
      styleUrls: ['./show-api.component.css']
    })
    export class ShowApiComponent implements OnInit {
      
      li:any;
      lis=[];
      constructor(private http : HttpClient){
          
    }
      
      ngOnInit(): void {
        .subscribe(Response => {
      
          // If response comes hideloader() function is called
          // to hide that loader 
          if(Response){  
            hideloader();
          }
          console.log(Response)
          this.li=Response;
          this.lis=this.li.list;
        });
        function hideloader(){
          document.getElementById('loading').style.display = 'none';}
      }}
    // The url of api is passed to get() and then subscribed and 
    // stored the response to li element data array lis[] is created 
    // using JSON element property
  • Step 4: Now data array need to be shown using HTML. A Table is used in which rows are added dynamically by the size of data array. For this, rows are created using *ngFor then data is showed from each row. In this file I had added a loader which loads till response comes.
    show-app.component.html:-




    <h1>Registered Employees</h1>
    <div class="d-flex justify-content-center">
    <div class="spinner-border" role="status" >
        <span class="sr-only" id="loading">Loading...</span>
    </div>
    </div>
    <table class="table" id='tab'>
        <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Office</th>
            <th scope="col">Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let e of lis;">
            <td>{{ e.name }}</td>
            <td>{{ e.position }}</td>
            <td>{{ e.office }}</td>
            <td>{{ e.salary }}</td>
        </tr>
        </tbody>
    </table>                    

Output: In console, the data array of the response can also seen which is further used to show data.




My Personal Notes arrow_drop_up
Recommended Articles
Page :