1

Estou montando uma aplicação que deve criar uma lista de Pokemons, porém estou com os seguintes problemas:

A minha tabela que deveria exibir a lista de Pokemons não exibe nada. Quando faço o console.log do meu array com o resultado do meu método ele exibe: [object Object].

O método que deveria fazer a lista de Pokemons getPokemons faz um push em um array chamado pokemonsList e é esse pokemonList que retorna o [object Object].

Sei que esse [object Object] é uma string, então tentei fazer um JSON.stringify para converter em JSON, porém mesmo assim não funcionou.

O que eu achei interessante é que quando faço no OnInit o console.log só do resultado do meu service, ele retorna o objeto certinho.

Como posso resolver isso? Obrigado!

HTML

<table class="table">
<thead class="bg-warning">
  <tr>
    <th scope="col">Nome:</th>
    <th scope="col">Url: </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let pokemon of pokemonsList">
    <td>{{pokemon.name}}</td>
    <td>{{pokemon.url}}</td>
  </tr>
  <tr>
</tbody>

ListaPokemonsComponent

import { Component, OnInit } from '@angular/core';
import { PokemonModel } from '../../interfaces/pokemon-model'
import { PokemonsService} from '../../services/pokemons.service'

@Component({
  selector: 'app-lista-pokemons',
  templateUrl: './lista-pokemons.component.html',
  styleUrls: ['./lista-pokemons.component.css']
})
export class ListaPokemonsComponent implements OnInit {

  pokemon: PokemonModel = new PokemonModel();
  pokemonsList: Array <any> = new Array();

  constructor(private pokemonService: PokemonsService) { }

  ngOnInit(): void {
    this.listarPokemons();
    this.pokemonService.getPokemons()
    .subscribe((response: any) => { console.log(response); } );
  }


  listarPokemons(){
   this.pokemonService.getPokemons()
   .subscribe(resultado => {
     this.pokemonsList.push(resultado);
     JSON.stringify(this.pokemonsList);
     console.log('Lista de Pokemons: ' + this.pokemonsList);
    } );
  }
}

PokemonsService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PokemonModel } from '../interfaces/pokemon-model';
import { environment } from '../../environments/environment';

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

  constructor(private http: HttpClient) { }

  getPokemons(): Observable<any>{
    return this.http.get(`${environment.pokemonApiUrl}/pokemon?limit=10`);
  }


}

2 Respostas 2

1

Bom, depois de muita pesquisa e estudo e levando como conselho o comentário do Jean eu consegui resolver o problema.

O código final de listarPokemons ficou assim:

 listarPokemons(){
    this.pokemonService.getPokemons()
    .subscribe(resultado => {
      const res =  ((resultado));
      console.log(res);
      const values = Object.values(res);
      this.pokemons.push(values[3]);
      console.log('Pokemons:', this.pokemons);
     } );
   }
 }

O que eu fiz foi:

Armazenar os dados do resultado em uma const res:

const res =  ((resultado));

Para pegar os valores do objeto dentro dela usei o método Object.value e os armazenei em uma outra const values, essa const me retornou um array com diversos outros arrays, incluindo o array que eu precisava que era o da posição [3]. Ai fiz um push values[3] dentro do meu array principal this.pokemons.

Para acessar os valores dentro desse array, fiz um *ngFor="let pokemon of pokemons[0]", que no final, retornou o nome dos meus pokemons.

 <table class="table">
        <thead class="bg-warning">
          <tr>
            <th scope="col">Nome:</th>
            <th scope="col">Url: </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let pokemon of pokemons[0]">
            <td>
              {{pokemon.name}}
            </td>
            <td>
              {{pokemon.url}}
            </td>
          </tr>
          <tr>
        </tbody>
      </table>

    

Problema resolvido.

0

O método JSON.stringify converte uma array em JSON. A API da qual você está requisitando na verdade retorna um JSON do qual você precisará tratar e usar como array. Dê uma olhada nesta outra pergunta, acredito que possa lhe ajudar

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .