Vamos a entrar en la página "restcountries.eu", que posee un servicio de datos disponible para acceder a ellos mediante http. Vamos a buscar una lista de países cuyo idioma sea el español.
Para ello, entramos en la página, pulsamos en el menú "Language" y nos guardamos la url señalada en la imagen:
Ahora vamos a modificar el "app.module.ts" para importar el componente "HttpClientModule":
Vamos a elegir el componente "home" para capturar y mostrar los datos. Abrimos el "home.component.ts" y lo modificamos como sigue:
Como se puede ver, lo primero que hacemos es importar el "HttpClient".
Después nos creamos una variable de arrays llamada "paises".
En el constructor de la clase es donde hemos realizado la mayor modificación.
En primer lugar inyectamos en el constructor una variable "http" de la clase "HttpClient".
En segundo lugar realizamos la petición http en sí misma, haciendo un "get" de la dirección que copiamos antes de la web de países y añadiendo en el "subscribe" una función de flecha que vamos a utilizar para guardar la respuesta de la petición (la lista de países) en nuestra variable de clase "paises". Por último aprovechamos la función para mostrar a través de la consola el contenido de la respuesta.
Ahora simplemente modificamos el "home.component.html" para que muestre la lista de países mediante la directiva "*ngFor":
Y comprobamos que realmente se muestra la lista de países, y el contenido de la respuesta de la petición en la consola:
Y eso es todo.
No hay comentarios:
Publicar un comentario