AnswerBun.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!

Related Questions

Parar movimento com animation css

1  Asked on September 26, 2021 by jeanalves

   

Como executar uma paginação com PDO?

1  Asked on September 26, 2021

     

Implicações de @Autowired em construtor e fora

1  Asked on September 26, 2021 by daniela-morais

   

Menu Dropdown Responsivo

2  Asked on September 26, 2021 by user77295

     

Agrupar um array de objetos

3  Asked on September 26, 2021 by david-coelho

     

Sobrepor texto em uma imagem com flex box

1  Asked on September 26, 2021 by lopes-boa

     

TreeView com Nodes & Childs através de base de dados SQL

1  Asked on September 26, 2021 by diogo-costa

   

Erro ‘Método não-estático requer um destino.’

1  Asked on September 26, 2021 by caio-coutinho

     

Consulta de coleções firebase

1  Asked on September 26, 2021 by lima

         

useState não atualiza – ReactJS

3  Asked on September 26, 2021 by lucas-michel-da-silva

       

como incrementar um array de objeto javascript em loop?

1  Asked on September 26, 2021 by faillen

 

Adicionar character no fim da linha

3  Asked on September 26, 2021 by arcyde

   

Escala de serviço filtro de datas no plano de férias

1  Asked on September 26, 2021 by el-capitan-comandante

     

Problema ao validar input

1  Asked on September 26, 2021 by andr-cabral

   

“List Comprehensions” vale a pena?

2  Asked on September 26, 2021 by gui-reis

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir