Cargar datos con un observable en Angular 2+

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 {

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);
});
[/typescript]

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).

Os dejo el ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte