Hola a todos, hoy os voy a enseñar como cargar datos con un observable en Angular 2+.
Para cargar datos en nuestra aplicación, lo ideal es usar promesas o observables, en este caso veremos los observables.
En nuestro caso, vamos a recoger datos de https://www.thecocktaildb.com/api.php
En esta API, nos devolverá datos sobre cocktails. Vamos a mostrar todos los cocktails que contienen el nombre de margarita, en concreto, vamos a llamar a esta url:
https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita
Si la pones en el navegador, veras los datos que vamos a recoger en Angular.
Vamos a crear un servicio para recuperar los datos:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs' @Injectable() export class DataService { constructor(private http: HttpClient) { } getCocktails(): Observable<any> { const urlBase = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita'; return this.http.get(urlBase); } }
Recordar que debemos importar el modulo HttpClientModule en app.module.ts.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { DataService } from './data.service'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [DataService] }) export class AppModule { }
En el app.component.ts, inyectaremos el servicio de data.service.ts, llamaremos la función que hemos creado y nos subscribiremos para que nos lleguen los datos.
import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service' @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { public listCocktails: any[]; constructor(private data: DataService){ this.listCocktails = []; } ngOnInit(){ this.data.getCocktails().subscribe(cocktails => { this.listCocktails = cocktails.drinks; console.log(this.listCocktails); }); } }
Estas lineas son las importantes:
this.data.getCocktails().subscribe(cocktails => { this.listCocktails = cocktails.drinks; console.log(this.listCocktails); });
IMPORTANTE: lo de cocktails.drinks, es porque el objeto que viene es así.
Ya tenemos los cocktails, así que podemos recorrerlos en el html, cogeremos el nombre del cocktail (strDrink) y la imagen del mismo(strDrinkThumb).
<div *ngFor="let drink of listCocktails"> Nombre: {{drink.strDrink}} <img [src]="drink.strDrinkThumb"> </div>
Os dejo el ejemplo completo:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte
Deja una respuesta