Angular 4 - Servizio Http

Il servizio HTTP ci aiuterà a recuperare i dati esterni, a postarvi, ecc. Dobbiamo importare il modulo http per utilizzare il servizio http. Facciamo un esempio per capire come utilizzare il servizio http.

Per iniziare a utilizzare il servizio http, dobbiamo importare il modulo in app.module.ts come mostrato di seguito -

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 { }

Se vedi il codice evidenziato, abbiamo importato HttpModule da @ angular / http e lo stesso viene aggiunto anche nell'array delle importazioni.

Usiamo ora il servizio http in 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))
   }
}

Cerchiamo di capire il codice evidenziato sopra. Dobbiamo importare http per utilizzare il servizio, che viene eseguito come segue:

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

In classe AppComponent, viene creato un costruttore e la variabile privata http di tipo Http. Per recuperare i dati, dobbiamo utilizzare il fileget API disponibile con http come segue

this.http.get();

Richiede l'URL da recuperare come parametro come mostrato nel codice.

Useremo l'URL di prova - https://jsonplaceholder.typicode.com/usersper recuperare i dati json. Vengono eseguite due operazioni sulla mappa dei dati dell'URL recuperata e la sottoscrizione. Il metodo Map aiuta a convertire i dati in formato json. Per utilizzare la mappa, dobbiamo importare come mostrato di seguito:

import 'rxjs/add/operator/map';

Una volta completata la mappa, l'iscrizione registrerà l'output nella console come mostrato nel browser -

Se vedi, gli oggetti json vengono visualizzati nella console. Gli oggetti possono essere visualizzati anche nel browser.

Per gli oggetti da visualizzare nel browser, aggiornare i codici in app.component.html e app.component.ts come segue -

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) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

Nel app.component.ts, utilizzando il metodo di sottoscrizione chiameremo il metodo di visualizzazione dei dati e gli passeremo i dati recuperati come parametro.

Nel metodo di visualizzazione dei dati, memorizzeremo i dati in una variabile httpdata. I dati vengono visualizzati nel browser utilizzandofor su questa variabile httpdata, che viene eseguita in app.component.html file.

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

L'oggetto json è il seguente:

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "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"
   }
}

L'oggetto ha proprietà come ID, nome, nome utente, e-mail e indirizzo che ha internamente via, città, ecc. E altri dettagli relativi a telefono, sito Web e azienda. Usando ilfor loop, visualizzeremo il nome ei dettagli della città nel browser come mostrato nel file app.component.html file.

Ecco come viene mostrato il display nel browser:

Aggiungiamo ora il parametro di ricerca, che filtrerà in base a dati specifici. Dobbiamo recuperare i dati in base al parametro di ricerca passato.

Di seguito sono riportate le modifiche apportate in app.component.html e app.component.ts file -

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 {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

Per il get api, aggiungeremo il parametro di ricerca id = this.searchparam. Il parametro di ricerca è uguale a 2. Abbiamo bisogno dei dettagli diid=2 dal file json.

app.component.html

{{name}}

Ecco come viene visualizzato il browser:

Abbiamo consolato i dati nel browser, che viene ricevuto dall'http. Lo stesso viene visualizzato nella console del browser. Il nome dal json conid=2 viene visualizzato nel browser.