Método GET – PokeApi

Angular utiliza servicios para obtener datos del servidor o Backend, de esta forma podemos realizar una aplicación funcional.

Los datos generalmente se reciben en formato JSON desde el servidor mediante una clase llamada HttpClient que nos facilita esta tarea.

Para empezar debemos importar el modulo HttpClientModule de la siguiente manera:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Para mantener una buena organización crearemos una carpeta donde colocaremos los servicios dependiendo de las necesidades del proyecto src\app\services

Vamos a crear un servicio en esta ruta llamado pokemon, ya que para este ejemplo vamos a consumir una api publica pokeapi.co

De principio tenemos el servicio de la siguiente manera:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PokemonService {

  constructor() { }
}

Lo primero que haremos es inyectar la clase HttpClient dentro del constructor para luego usarlo en el método getPokemon() que hará una solicitud de tipo GET y traer datos en formato JSON.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PokemonService {

  constructor(private http: HttpClient) { }

  getPokemon() {
    return this.http.get('https://pokeapi.co/api/v2/pokemon?limit=20');
  }
}

Luego haremos inyectaremos este servicio en nuestro controlador para realizar la suscripción al método y obtener los datos.

import { Component } from '@angular/core';
import { PokemonService } from './services/pokemon.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'cursoangular';
  pokemones = null;

  constructor(private pokeapi: PokemonService) {
    this.pokeapi.getPokemon().subscribe((res: any) => {
      this.pokemones = res.results;
    });
  }
}

Ahora en nuestro HTML vamos a crear una tabla con clases de Bootstrap para mostrar la información que recibimos que consta del nombre y la url del servicio para obtener la información del Pokémon.

{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
}

Con la URL vamos a crear un servicio para obtener la información del Pokémon seleccionado par obtener lo siguiente

Les dejo el codigo final del controlador y el HTML para que lo revisen y puedan realizar mas funciones.

import { Component } from '@angular/core';
import { PokemonService } from './services/pokemon.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'cursoangular';
  pokemones = null;
  pokemon: any = {}

  constructor(private pokeapi: PokemonService) {
    this.pokeapi.getPokemon().subscribe((res: any) => {
      this.pokemones = res.results;
    });
  }

  getInfo(url) {
    this.pokeapi.getInfo(url).subscribe((res: any) => {
      this.pokemon = res;
    })
  }

}

<div class="container mt-2">
    <div class="row">
        <div class="col-md-6">
            <table class="table table-sm table-bordered">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>VER INFO</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let pokemon of pokemones">
                        <td>{{pokemon.name}}</td>
                        <td>
                            <button class="btn btn-primary btn-sm" (click)="getInfo(pokemon.url)">Info</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <p>Nombre: {{pokemon.name}}</p>
                    <p>Experiencia: {{pokemon.base_experience}}</p>
                    <p>Altura: {{pokemon.height}}</p>
                    <p>Peso: {{pokemon.weight}}</p>
                    <img *ngIf="pokemon.sprites" [src]="pokemon.sprites.back_default" alt="">
                    <img *ngIf="pokemon.sprites" [src]="pokemon.sprites.front_default" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

2 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada.