Angular nested forloop in html

mryusuf 0
Viewed 33

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
loops angular
2 Answers

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
Khalid Sheet0

As per your screenshot, I think it should be like below

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

Can you try using this?

gopi krishna0
Related