Whenever I attempt to display data from an API, an error always pops up. My goal is to showcase each piece of data individually. To help you analyze the issue, I've included the URL of the API below:
civilizationes.component.ts
import { Component, OnInit } from '@angular/core';
import { GameService } from '../../services/game.service';
@Component({
selector: 'app-civilizaciones',
templateUrl: './civilizaciones.component.html',
styleUrls: ['./civilizaciones.component.css']
})
export class CivilizacionesComponent implements OnInit {
civilizaciones: any = [];
constructor(private gameService: GameService) { }
ngOnInit() {
this.gameService.getCivilizations().subscribe(
res => {
this.civilizaciones = res;
},
err => console.error(err)
);
}
}
civilizationes.component.html
<tr *ngFor="let civilizacion of civilizaciones">
<td>{{civilizacion.name}}</td>
</tr>
API
{
"civilizations": [
{
"id": 1,
"name": "Aztecs",
"expansion": "The Conquerors",
"army_type": "Infantry and Monk",
"unique_unit": [
"https://age-of-empires-2-api.herokuapp.com/api/v1/unit/jaguar_warrior"
],
"unique_tech": [
"https://age-of-empires-2-api.herokuapp.com/api/v1/technology/garland_wars"
],
"team_bonus": "Relics generate +33% gold",
"civilization_bonus": [
"Villagers carry +5",
"Military units created 15% faster",
"+5 Monk hit points for each Monastery technology",
"Loom free"
]
},