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

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *