Getting Object Object while doing GET (pokemon API)

Question

Hello I'm kinda new to this things and I'm doing a get from pokemon API, this is the API URL I'm using.

This is my code :

import { Component, OnInit } from '@angular/core';
import { Pokemon, Pokemon2 } from 'src/app/classes/pokemon';
import { PokemonService } from 'src/app/services/pokemon.service';

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

  pokemon:any[] = []
  constructor(private pokemonservice: PokemonService) { }

  ngOnInit(): void {
   this.pokemonservice.getPokemon().subscribe((data:any)=>{
     this.pokemon= data
     console.log(this.pokemon)
   })
  }
}

I have a service who return only the http the problem is that in my page it says OBJECT OBJECT, I know data is like this :

"count": 1126,
"next": "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/"
}

I usually had data's with only an object but here says also COUNT, NEXT, PREVIOUS, How can I do with this ?

Answer 1

There is no pokemon.name and pokemon.results is [object object] (Array of objects to be accurate).

Try this: {{ pokemon.results[0].name }}. It will give you the name of first pokemon. If you would like to list all pokemon names you can do this:

<div *ngFor="let pokemon of pokemon.results">
  {{ pokemon.name }}
</div>