Perché array porta solo un oggetto nel progetto Angular?

Question

Sto lavorando con l'API di League of Legends, più specifica con il campione json che portano.

Ho questo servizio realizzato con Angular:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
}

@Injectable({
  providedIn: 'root'
})
export class ChampionsService {

  constructor(private http: HttpClient) { }

  getChampions(){
    return this.http.get('http://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json');
  }

}

Questo è il mio file .ts:

import { Component, OnInit } from '@angular/core';
import {ChampionsService } from '../../services/champions.service';

@Component({
  selector: 'app-champions',
  templateUrl: './champions.component.html',
  styleUrls: ['./champions.component.css']
})

export class ChampionsComponent implements OnInit {

  public champions;
  public arrayChampions;
  
  
  constructor(private championsService:ChampionsService) { }

  ngOnInit(): void {
    this.getAllChampions();
  }

  getAllChampions(){
    this.championsService.getChampions().subscribe(
      data => { this.champions = data, 
        this.arrayChampions = Object.entries(this.champions.data).map(([k,v]) => ({ [k]:v })),
        this.ArrayIterator(); 
      },
      err => {console.error(err)},
      () => console.log("Champions cargados")
    );
  }

  ArrayIterator() {
    let IteratableArray = Array();
    for (let item of Object.keys(this.arrayChampions[0])) {
      var eventItem = Object.values(this.arrayChampions[0]);
      IteratableArray.push(eventItem);
    }
    this.arrayChampions = IteratableArray[0];
  }
}

E questo è l'html:

<p>champions works!</p>
{{arrayChampions | json}}
 <!-- Cards -->
<div *ngFor="let arrayChampion of arrayChampions" class="card mb-3">
    <div class="card-header">
    </div>
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <a class="text-decoration-none">{{arrayChampion.id}}</a>
        </blockquote>
    </div>
    <div class="card-footer">
    </div>
</div>

Come puoi vedere, il var "arrayChampions" porta solo il primo campione (Atrox) quando dovrebbe portare tutti i campioni a quanto ho capito (sono nuovo in javascript e Angular).

Answer 1

Secondo il tuo esempio, ho creato e stackblitz qui, e ha fatto iterare l'intero arrayChampionssui suoi valori.

Si prega di trovare lo stacblitz funzionante qui

HTML di esempio:

<hello name="{{ name }}"></hello>
<!-- {{this.products |json}} -->
<ul>
    <li *ngFor="let champ of products | keyvalue">
        <label style="font-size: 20px;font-weight: bold;color: red;">
      {{champ.key}}
    </label>
        <ul *ngFor="let item of champ.value | keyvalue">
            <li>
                {{item.key}} : {{item.value}}
                <ul *ngFor="let sub of item.value | keyvalue">
                    <li>
                        {{sub.key}} : {{sub.value}}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Component.ts di esempio:

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { map, catchError, tap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  apiURL: string =
    "https://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json";
  name = "Angular";
  products = [];

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.getChamp();
  }

  getChamp() {
    this.httpClient.get(this.apiURL).subscribe((data: any) => {
      this.products = data.data;
      Object.keys(data.data).map((key: any, obj: any) => obj[key]);
    });
  }
}