Recuperación de datos usando HTTP

En este ejercicio vamos a actualizar el ejercicio que hicimos en el post anterior Servicios e Inyección de Dependencia, la idea es usar el método HttpGet, para obtener la lista de países y usaremos un observable para retornar la data obtenida

1) Primero para poder usar el metodo HttpGet tenemos que importar el modulo "HttpClientModule" en nuestro modulo de la aplicación, para ello nuestro archivo app.module quedara de la siguiente manera

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//Este es el modulo a importar
import { HttpClientModule } from '@angular/common/http'; 
//------------------

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule//<-- Lo agregamos aqui
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2) Ahora actualizaremos nuestro servicio, crearemos una variable URL donde apuntara a una API, en nuestro caso crearemos un archivo json con una lista de países

countries.json

[
  { "name": "India", "code": "IN" },
  { "name": "United States", "code": "US" },
  { "name": "United Kingdom", "code": "UK" },
  { "name": "Australia", "code": "AU" },
  { "name": "Canada", "code": "CA" },
  { "name": "France", "code": "FR" },
  { "name": "Germany", "code": "DE" },
  { "name": "Italy", "code": "IT" },
  { "name": "Japan", "code": "JP" },
  { "name": "Russia", "code": "RU" },
  { "name": "South Korea", "code": "KR" },
  { "name": "Spain", "code": "ES" },
  { "name": "Sweden", "code": "SE" },
  { "name": "Switzerland", "code": "CH" },
  { "name": "Turkey", "code": "TR" },
  { "name": "Ukraine", "code": "UA" }
]

3) En nuestro servicio inyectaremos en nuestro constructor la variable http: HttpClient, que usaremos para llamar al método get, le pasamos como parámetro la URL y usamos el observable y su método pipe para poder modificar la respuesta, en nuestro caso solo mostraremos por consola la respuesta.

Service

import { Injectable } from '@angular/core';
import { Observable, tap } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export interface ICountry {
  name: string;
  code: string;
}

@Injectable({
  providedIn: 'root'
})
export class Service1Service {
  private url = 'assets/countries.json';

  constructor(private http: HttpClient) { }

  getCountries() : Observable<ICountry[]> {
    return this.http.get<ICountry[]>(this.url).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data))),
    );

  }
}

4) En nuestro componente principal actualizamos para suscribirnos a la respuesta del servicio, para poder asignar a la variable countries la respuesta recibida

import { Component } from '@angular/core';
import { ICountry, Service1Service } from './services/service1.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example1';
  countries:  ICountry[];

  constructor(private service1: Service1Service) {
    this.countries = [];
    this.service1.getCountries().subscribe(data => this.countries = data);
  } 
}

5) ejecutamos la aplicacion y obtenemos los paises obtenidos