Angular nested forloop in html

Issue

I Had to make a nested forloop in my own preferred language and i chose javascript, I chose the Angular frame work for this, I tried a nested forloop in Angular using the PokeAPI, nothing seems off but it still doesn't work

  <div class="card border-primary justify-center col-xl-3 col-md-4 col-8" *ngFor="let pokemon of pokemons">
    <div class="card-header">
      #{{pokemon.id}}
    </div>
    <div class="card-body">
      <h4 class="card-title">{{pokemon.name}}</h4>
      <div class="d-flex justify-content-center">
        <img src="{{pokemon.sprites.front_default}}" alt="">
        <img src="{{pokemon.sprites.front_shiny}}" alt="">
      </div>
      <div class="accordion">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button #movesButton (click)="moves.classList.toggle('collapse'); movesButton.classList.toggle('collapsed')" class="accordion-button collapsed" type="button">
              {{pokemon.name}}'s moves
            </button>
          </h2>
          <div #moves class="accordion-collapse collapse">
            <div class="accordion-body">
              <p *ngFor="let move of pokemon.moves; let i = index">{{i}}: {{move.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>```

I don't get an error either just a bunch of empty paragraphs


Here are the images of the API results and the empty paragraphs


  [1]: https://i.stack.imgur.com/bZHco.png
  [2]: https://i.stack.imgur.com/EZXgy.png

Solution

It looks like you missed a key out there, as per the API response and your for loop you wrote.

you can obtain the move name by writing:

<p *ngFor="let move of pokemon.moves; let i = index">{{i}}: {{move.move.name}}</p>

moves is an array contains an object called move and you named your variable in the loop the same name

so you should have

move.move.name

Answered By - Khalid Sheet