Displaying object into HTML in Angular

Question

sorry for the noob question. I created an http request and retrieved some pokemon data and put it in an object called pokemon, like so:

export class AppComponent implements OnInit{
  title = 'Pokedex';
  apiURL = 'https://pokeapi.co/api/v2/pokemon/1';
  pokemon = {};
  constructor(private http: HttpClient){}

  ngOnInit(): void{
    this.http.get(this.apiURL).subscribe(data =>{
        const pokemon = {
          name: data['name'],
          id: data['id'],
          abilities: data['abilities'].map( ability => ability['ability']['name']),
          types: data['types'].map( type => type['type']['name']),
          image: data['sprites']['front_default']
      }
      console.log(pokemon);

When I console log the object, it outputs in the console fine. However, when I try to display it in an html {{ pokemon }} it just returns [object, Object]

How can I get around this?

I have tried the methods suggested below. {{pokemon.name}}, {{pokemon[name]}} and {{pokemon?.name} display a blank page.

{{ pokemon | json }}

returns an empty object, in the form of {}.

Am I perhaps doing something else wrong?

Owen Kelvin · Accepted Answer · 2020-11-11T04:33:54.107

9

You need to use the json pipe

<pre>{{ pokemon | json }}</pre>

OR


<div> Id: {{ pokemon.id }} </div>
<div> Name: {{ pokemon.name }} </div>


<div> Abilities:
  <ul>
    <li *ngFor="let ability of pokemon.abilities"> {{ ability }}</li>
  </ul>
</div>

<div> Types:
  <ul>
    <li *ngFor="let type of pokemon.types"> {{ types }}</li>
  </ul>
</div>

edited Nov 11 '20 at 04:33

answered Nov 11 '20 at 03:08

Owen Kelvin

14,054
10
41
74

Hi, thank you for your response. I have tried this, but now instead it displays an empty object, in the form of {}. I have tried the other methods suggested by others, such as {{ pokemon.name }} and {{pokemon[name]}}, but these display nothing. Do you know of any ways around these problems? – Andrew Ozeki Nov 11 '20 at 03:25
That is because the Object is empty, can you try to console log the Object? – Owen Kelvin Nov 11 '20 at 03:31
console logging the object returns an object with the name, id, abilities, types, and image data inside of it so it doesn't seem to be empty. – Andrew Ozeki Nov 11 '20 at 03:33
Actually it is because you have not assigned any value to `pokemon`. Inside the subscribe function add `this.pokemon = data` – Owen Kelvin Nov 11 '20 at 03:34
If it's not too much, could I ask one more thing? While the name and ID displays on the html, the abilities and types data still displays [object Object]. Console logging both of them return arrays with the respective data in it. Is there something I'm forgetting here as well? – Andrew Ozeki Nov 11 '20 at 03:48
This properties are Arrays, you need to use `*ngFor` to loop over the array to display individual properties – Owen Kelvin Nov 11 '20 at 04:24
I have added this to the answer – Owen Kelvin Nov 11 '20 at 04:35

score 1 · Answer 2 · answered Nov 11 '20 at 03:07

1

call property as {{pokemon?.name}}

answered Nov 11 '20 at 03:07

eutychos tfar

169
2
9

score 0 · Answer 3 · answered Nov 11 '20 at 03:14

0

You can't use object directly. You have to access object properties by either . (Dot) notation or object[property] way.

In your case, if you want to use the property of name then use

{{ pokeman.name }}

or

{{ pokeman[name] }}

answered Nov 11 '20 at 03:14

Manikannan

1
1

Displaying object into HTML in Angular

3 Answers3