Display data that has not been displayed

@Olivier-Tvx wrote:

Here is what my dummy app does at the moment :

Click a button => get a random object and display its info.

What I am trying to do :

Click a button => get a random object that has not been displayed yet and display its info.

How could I do that without removing data ?

random-cards.html

<!--
  Generated template for the RandomCardsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>random-cards</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>
<!--         <ion-list>
          <ion-item *ngFor="let card of cards">
            ({{card.id}}) {{card.question}} - {{card.answer}}

          </ion-item>
        </ion-list> -->

      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>

        <button ion-button (click)="getRandom()">Get Random</button>

      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item *ngFor="let rc of randomCard">
            ({{rc.id}}) {{rc.question}} - {{rc.answer}} - {{rc.played}}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

random-cards.ts

import {Component, OnInit} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import cards from '../../providers/data/cards';
import {Card} from "../../providers/Models/cards.interface";

/**
 * Generated class for the RandomCardsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-random-cards',
  templateUrl: 'random-cards.html',
})

export class RandomCardsPage implements OnInit {
  cards: Card[];
  randomCard: Card[];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ngOnInit() {
    this.cards = cards.cards;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RandomCardsPage');
    console.log(this.cards);
  }

  getRandom() {
    let rd = Math.floor(Math.random() * this.cards.length);
    this.randomCard = [this.cards[rd]];
  }

}

cards.ts

export default
  {
    "cards": [
      {
        "id": "1",
        "question": "question 1",
        "answer": "reponse 1",
        "hint": "hint 1",
      },
      {
        "id": "2",
        "question": "question 2",
        "answer": "reponse 2",
        "hint": "hint 2",
      },
      {
        "id": "3",
        "question": "question 3",
        "answer": "reponse 3",
        "hint": "hint 3",
      }
    ]
  };

cards.interface.ts

export interface Card {
  id: string;
  question: string;
  answer: string;
  hint: string;
}

Posts: 1

Participants: 1

Read full topic