Why Array Only Brings One Object In Angular Project?

I'm working with the League of Legends API, more specific with the champion json they bring. I have this service made with Angular: import { Injectable } from '@angular/core'; impo

Solution 1:

As per your exmaple I have created and stackblitz here, And it made the whole arrayChampions Iterate over its values.

Please find the working stacblitz here

Sample HTML :

<helloname="{{ name }}"></hello><!-- {{this.products |json}} --><ul><li *ngFor="let champ of products | keyvalue"><labelstyle="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>

Sample component.ts :

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"]
})
exportclassAppComponent {
  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]);
    });
  }
}