TransWikia.com

Listagem de um array dentro de um JSON angular

Stack Overflow em Português Asked by Joao Vitor Franco on August 20, 2020

Bom dia senhores, estou utilizando a api do IGDB (Games) para a realização de um site angular 7(typescript), nela ao receber um JSON recebo apenas o ID de gênero, mas se na chamada contextualizar consigo receber dentro do json, o id e o name(dentro de um array secundário), gostaria de imprimir na tela de profile que estou criando todos os generos dentro do array secundário, ou caso não exista um “Não preenchido”, no caso do print a baixo, tentei realizar apenas um teste pegando a primeira posição do vetor, ele imprime, mas quando não existe nada ele da erro no restante da tela.

HTML :

<h3>{{game.name}}</h3>
        <p><img src="https://images.igdb.com/igdb/image/upload/t_cover_big/{{game.cover.image_id}}.jpg">
            <br><br><strong>Desenvolvedora:</strong> {{game.involved_companies[0].company.name}}
            <br><br><strong>Engine:</strong> {{game.game_engines[0].name}}
            <br><br><strong>Gêneros:</strong> {{game.genres[0].name}}

Service :

getGameById(id: string): Observable<Game[]> {

return this.http.post<Game[]>(`${FACELIST_API}` + '/games',`fields *, genres.name; where id = (${id});`, httpOptions);

E o typescript do componente.

export class GameprofileComponent implements OnInit {


  games: Game[]
  imgs: Cover[]

  constructor(private gammelistService: GammelistService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.gammelistService.getGameById(this.route.snapshot.params['id']).subscribe(
      list => {
        let containsCover = list.filter(function (elem, i, array) {
          return elem.cover !== undefined;
        });
        this.games = containsCover;

      });
  }
}

E o JSON

[
    {
        "id": 81249,
        "cover": {
            "id": 67245,
            "image_id": "m5v5rte27ri2rj8i0e1j"
        },
        "genres": [
            {
                "id": 12,
                "name": "Role-playing (RPG)"
            },
            {
                "id": 31,
                "name": "Adventure"
            }
        ]
    }
]

One Answer

Tente desta forma:

<div *ngIf="game">
<h3>{{game.name}}</h3>
<p><img src="https://images.igdb.com/igdb/image/upload/t_cover_big/{{game.cover.image_id}}.jpg">

<br><br><strong>Desenvolvedora:</strong> {{game.involved_companies[0].company.name}}
<br><br><strong>Engine:</strong> {{game.game_engines[0].name}}

<ng-container *ngIf="game?.genres; else naoPreenchido">
    <br><br><strong>Gêneros:</strong>
    <div *ngFor="let genre of game.genres">
        {{genre.name}}
    </div>
</ng-container>

<ng-template #naoPreenchido>
    <br><br><strong>Gêneros:</strong> NÃO PREENCHIDO
</ng-template>

Answered by Marcos Filipe on August 20, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP