Angular 6 Http Service

Angular 6 Http Service

Hπ Service will help us to collect external data, post to it, etc. To make use of the http service we must import the http module. Let's take an example of how to allow use of the http service.

We need to import the module in app.module.ts to start using the http service, as shown below –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Let's use the http service now at app.component.ts.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

Let's explain the coding already Highlighted. We need to import http to allow the following usage of the service –

import { Http } from '@angular/http';

A constructor is generated in the class AppComponent, as is the private http variable of type Http. To retrieve the info, we must use the get API with http as follows.

this.http.get();

It takes the url as the parameter to be fetched as seen in the code.

To get the json info, we can use the test url − https:/jsonplaceholder.typicode.com/users. Two operations are conducted on the map and subscribe to the fetched url data. The Map Method helps convert the data to format json.

import {map} from 'rxjs/operators';

The json objects are seen in the console, if you can. Within the browser all the objects may be displayed.

To view the objects in the browser, update the app.component.html and app.component.ts codes as follows –

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

In app.component.ts we must call the view data method using the subscribe feature and pass the data fetched to it as the parameter.

We must store the data in a httpdata variable inside the view data process. Using this httpdata variable, which is performed in the app.component.html file, the data is shown in the browser.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

The json object is as follows −

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "Sincere@april.biz",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

The object has properties such as I d , name, username, email, and address that internally have street, city, etc. and other phone, website, and company-related details. We'll view the name and city information in the browser using the for loop, as seen in the app.component.html file.

Now let's introduce the search parameter, which is filtering based on unique details. We have to retrieve the data based on the passed search param.

The modifications made to app.component.html and app.component.ts files observe –

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .pipe(map((response) => response.json()))
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

We'll add the search param I d = this.searchparam for get api. The search-param is 2. We need the I d = 2 information from the json file.

We consoled the data that is obtained from the http in the browser. The same is seen in the console browser. In the browser the name of the json with I d = 2 is seen.