Can't not get an random item in an array (Angular 10)

Question

I'm trying to randomize items(cards that contain english words) from an flashCards array, so that each card can randomly appear when the user reload the page. I have used Math.floor(Math.random()) function but it doesn't work. How can I get randomly cards from an array of cards?

home.page.html:

<ion-content padding>
     <app-flash-card *ngFor="let card of flashCards" [ngClass]="randomize()">
        <div class="flash-card-front">{{card.front}}</div>

        <div class="flash-card-back">{{card.back}}</div>
     </app-flash-card>  
</ion-content>

home.page.ts:

export class HomePage {

    flashCards: any;
  
  constructor(public navCtrl: NavController) {
        this.flashCards = [
            {back: 'accreditation', front: 'offizielle Zustimmung'},
            {back: 'AIDA', front: 'Attention, Interest, Desire, Action (Aufmerksamkeit, Interresse, Wunsch, Handlung)-> Modell zur Werbewirkung'},
            {back: 'airtime', front: 'Sendezeit'},
            {back: 'ambient noise', front: 'Umgebungsgeräusch'},
            {back: 'ambitious', front: 'ehrgeizig,strebsam'}
        ];
    };
    randomize(){    
        var cards=this.flashCards[Math.floor(Math.random()*this.flashCards.length)];
        return this.flashCards[cards];
    }
}

Do you want to randomize the array before printing their contents ? — Shub, Aug 30 '20 at 19:52
you might be interested in [this](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) , randomize the array on constructor or on OnInit. — Shub, Aug 30 '20 at 19:56
also you are using directive ngClass incorrectly, they are meant for classes, read about them [here](https://angular.io/api/common/NgClass) — Shub, Aug 30 '20 at 19:59
shuffle(flashCards) { var currentIndex = this.flashCards.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = flashCards[currentIndex]; flashCards[currentIndex] = flashCards[randomIndex]; flashCards[randomIndex] = temporaryValue; } console.log(flashCards); return flashCards; } — Mai Linh, Aug 30 '20 at 20:48
I have replace randomize function with the shuffle function you gave me, but it's gave error :"ERROR TypeError: Cannot read property '4' of undefined". Can you tell me how to fix this error?. Thank you very much. — Mai Linh, Aug 30 '20 at 20:50

score 0 · Accepted Answer · answered Aug 30 '20 at 21:20

Just to post a complete solution: As described in the comments, you can simply use the existing shuffle function and access it in the constructor or the ngOnInit function (the Angular way to go). I put your flashCards on a new var and set it on this.flashCards after shuffling (this.flashCards is later used in your html). This will ensure that the array is shuffle before being displayed:

import { OnInit } from '@angular/core';

export class HomePage implements OnInit {

    flashCards: any;
  
    constructor(public navCtrl: NavController) { }

    ngOnInit(): void {
        var flashCards = [
            {back: 'accreditation', front: 'offizielle Zustimmung'},
            {back: 'AIDA', front: 'Attention, Interest, Desire, Action (Aufmerksamkeit, Interresse, Wunsch, Handlung)-> Modell zur Werbewirkung'},
            {back: 'airtime', front: 'Sendezeit'},
            {back: 'ambient noise', front: 'Umgebungsgeräusch'},
            {back: 'ambitious', front: 'ehrgeizig,strebsam'}
        ];
        this.flashCards = this.shuffle(flashCards)
    }

    shuffle (array) {
        var currentIndex = array.length, temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    }
}

Additionally, remove your [ngClass] and just write it like this:

<ion-content padding>
     <app-flash-card *ngFor="let card of flashCards">
        <div class="flash-card-front">{{card.front}}</div>

        <div class="flash-card-back">{{card.back}}</div>
     </app-flash-card>  
</ion-content>

The shuffling is done in ngOnInit and [ngClass] would anyway not the correct way to do so.

Good luck!

Thank you for the detailed explaination!!!! It helps me a lot! — Mai Linh, Aug 30 '20 at 22:21

Can't not get an random item in an array (Angular 10)

1 Answers1