Bonjour,

Je rencontre un problème d'affichage de mes données. Je cherche à afficher le contenu de 3 fonctions pour un projet de groupe.
Il y en a 2 qui marchent mais la troisième ne veut pas fonctionner. Il y a une erreur comme quoi on ne peut pas afficher un élément d'undifined alors qu'en faisant inspecter et en allant dans le Network, mes données ont bien chargées.

Ma table game est constituée de "id_game, name_game, genre_game, numbers_players_game, date_add_game, headline_game, on_of_game, id_thumbnail".

Voilà ce que je peux voir dans le network pour ma fonction getTop() :

{"status":"success","games":[{"id_game":"1","0":"1","name_game":"GTA5","1":"GTA5","genre_game":"GTA-like","2":"GTA-like","number_players_game":"16","3":"16","date_add_game":"2018-12-17 16:32:42","4":"2018-12-17 16:32:42","headline_game":"1","5":"1","on_off_game":"1","6":"1","id_thumbnail":"12","7":"12","name_thumbnail":"0jxvs9wp04311gdn36lr8ph0580u.jpg","8":"0jxvs9wp04311gdn36lr8ph0580u.jpg"},{"id_game":"2","0":"2","name_game":"Minecraft","1":"Minecraft","genre_game":"Aventure","2":"Aventure","number_players_game":"1","3":"1","date_add_game":"2018-12-17 17:53:44","4":"2018-12-17 17:53:44","headline_game":"1","5":"1","on_off_game":"1","6":"1","id_thumbnail":"13","7":"13","name_thumbnail":"cuu2z51wri2je6v6m5atvf0gi5x4.jpg","8":"cuu2z51wri2je6v6m5atvf0gi5x4.jpg"}]}

Voici mon html, comme vous pouvez le voir j'utilise le même système d'affichage pour mes 3 fonctions, le ngIf étant en commentaire pour pouvoir voir mon erreur.

<ion-content padding id="indexGames">
    <ion-spinner name="bubbles" *ngIf="loading"></ion-spinner>
    <div>
        <!-- *ngIf="topGames"-->
        <div class="topGames">
            <h3>Top Ten of Games</h3>
            <!----><div *ngFor="let topgame of topGames">
                <h6>{{ topgame.name_game }}</h6>
                <p>{{ topgame.genre_game }}</p>
            </div>
        </div>
        <div class="lastGames" *ngIf="lastGames">
            <h3>Last Games</h3>
            <div *ngFor="let lastgame of lastGames">
                <h6>{{ lastgame.name_game }}</h6>
                <img src="lastgame.id_thumbnail" alt="">
                <p>{{ lastgame.genre_game }}</p>
            </div>
        </div>
        <div class="headlineGames" *ngIf="headlineGames">
            <h3>Headline Games</h3>
            <div *ngFor="let headlinegame of headlineGames">
                <h6>{{ headlinegame.name_game }}</h6>
                <p>{{ headlinegame.genre_game }}</p>
            </div>
        </div>

    </div>

    <ion-grid *ngIf="gamesStatus">
        <ion-row>
            <ion-col *ngFor="let game of games" col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2>
                <ion-card>
                    <ion-card-content>
                        <img src="assets/thumbnails/{{game.thumbnail_game}}" alt="{{game.name_game}}" (click)="selectGame(game.id_game)">
                        <div *ngIf="selected === game.id_game" class="divSelectGame">
                            <div>
                                {{text}}
                            </div>
                        </div>
                    </ion-card-content>
                </ion-card>
            </ion-col>
        </ion-row>

    </ion-grid>
    <div *ngIf="gamesStatus === false && loading === false">
        <p>{{ "An error occured while loading !" | translate }}</p>
        <button ion-button (click)="loadingIndex()" full>{{ "Reload" | translate }}</button>
    </div>

</ion-content>

Et voici la partie ts, vous pouvez remarquer que les 3 fonctions ( getTop(), getLast(), getHeadline() ) se ressemblent.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FtmProvider } from '../../providers/ftm/ftm';

import { TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';

@IonicPage()
@Component({
  selector: 'page-index',
  templateUrl: 'index.html',
})
export class IndexPage {
  public gamesProvider;
  public gamesStatus = null;
  public games;
  public loading;
  public selected;

  public topGames;
  public topGamesProvider;
  public lastGames;
  public lastGamesProvider;
  public headlineGames;
  public headlineGamesProvider;

  public apiUrl = "http://findteammates/";

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public ftmProvider:FtmProvider,
              public translate: TranslateService,
              public http: HttpClient) {
    this.loadingIndex();
  }

  public loadingIndex(){
    this.loading = true;
    //this.getAllGames();
    this.getHeadline();
    this.getLast();
    this.getTop();
  }

  public selectGame(id){
    this.selected = id;
  }

  public getAllGames(){
    this.ftmProvider.getGames().then(data => {
      this.gamesProvider = data;

      if(this.gamesProvider.status == "success"){
        this.games = this.gamesProvider.games;
        this.gamesStatus = true;
      }
      else if(this.gamesProvider.status == "error"){
        this.games = null;
        this.gamesStatus = false;
      }

      this.loading = false;
    });
  }  

  public getTop(){
    this.ftmProvider.getTopGames().then(data => {
      this.topGamesProvider = data;

      if(this.topGamesProvider.status == "success"){
        this.topGames = this.topGamesProvider.topGames;
        this.gamesStatus = true;
      }
      else if(this.topGamesProvider.status == "error"){
        this.topGames = null;
        this.gamesStatus = false;
      }

      this.loading = false;
    });
  }

  public getLast(){
    this.ftmProvider.getLastGames().then(data => {
      this.lastGamesProvider = data;

      if(this.lastGamesProvider.status == "success"){
        this.lastGames = this.lastGamesProvider.games;
        this.gamesStatus = true;
      }
      else if(this.lastGamesProvider.status == "error"){
        this.lastGames = null;
        this.gamesStatus = false;
      }

      this.loading = false;
    });
  }

  public getHeadline(){
    this.ftmProvider.getHeadlineGames().then(data => {
      this.headlineGamesProvider = data;

      if(this.headlineGamesProvider.status == "success"){
        this.headlineGames = this.headlineGamesProvider.games;
        this.gamesStatus = true;
      }
      else if(this.headlineGamesProvider.status == "error"){
        this.headlineGames = null;
        this.gamesStatus = false;
      }

      this.loading = false;
    });
  }
}

Merci d'avance.

Aucune réponse