Method returns [Object Object]

Question

I am building an application that should create a list of Pokemons, but I have the following problems:

My table that should display the Pokemon list does not display anything. When I do the console.log of my array with the result of my method it displays: [Object Object].

The method that should make the list of Pokemons getPokemons does a push on an array called pokemonsList and it is this pokemonList that returns the [Object Object].

I know this [Object Object] is a string, so I tried to make a JSON.stringify to convert to JSON, but it still didn’t work.

What I found interesting is that when I do in Oninit the console.log only the result of my service, it returns the right object.

How can I fix this? Thank you!

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>

Listamonscomponent

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`);
  }


}

Answer 1

Well, after much research and study and taking as advice Jean’s comment I managed to solve the problem.

The final code of listPokemons looks like this:

 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);
     } );
   }
 }

What I did was:

Store result data in a const res:

const res =  ((resultado));

To get the values of the object inside it I used the method Object value. and stored them in another const values, this const returned me an array with several other arrays, including the array I needed that was the position [3]. I did a push values[3] within my main array this Pokemons.

To access the values within this array, I made a *ngFor="Let Pokemon of Pokemons[0]", that in the end returned the name of my 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>

    

Problem solved.

Answer 2

The method JSON.stringify converts an array to JSON. The API you are requesting from actually returns a JSON from which you will need to treat and use as an array. Take a look in this other question, I believe I can help you