随机排列的对象无法正常工作

Question

Shuffle array of objects doesn't work as expected

I've tried all different kinds of shuffle methods i have found here. If I run them on js.fiddle everything works fine, but since I use it in my code it doesn't shuffle anymore. There is no error message or anything. It just doesn't do anything. I've read all threads here about shuffling objects but I've found nothing which fixes this problem.

I use an API from https://randomuser.me/ to get random users. Those are stored in an array of objects which I want to shuffle and then render to the UI. I have a generator class to fetch the data and I store everything in a state object. I'm wondering if it's maybe something about the async function because all of that is pretty new to me.

export const shuffle = (array) => {
    let currentIndex = array.length;
    let temporaryValue;
    let randomIndex;
    const newArray = array.slice();
    // While there remains elements to shuffle...
    while (currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        // Swap it with the current element.
        temporaryValue = newArray[currentIndex];
        newArray[currentIndex] = newArray[randomIndex];
        newArray[randomIndex] = temporaryValue;
    }
    return newArray;
};

And here is the other code where I also call the shuffle function

/* Global state of the app

 */

const state = {};

const startGame = async() => {

    // 1) New Generator and add to state
    state.generator = new Generator();

    // 2) Prepare UI for Rendering
    renderer.clearContent();

    // 3)  Call API for new User
    await state.generator.generateUser();

    // 4) Render user to UI
    renderer.renderResults(state.generator.user);

    // 5) Start a timer
    $("#CountDownTimer").TimeCircles().start();


    // When Timer hits 0 -------------->

    $("#CountDownTimer").TimeCircles().addListener(function(unit, value, total) {
        if (total < 0) {
            //1) Clear HTML Content and Stop Timer
            elements.playGround.innerHTML = "";
            $("#CountDownTimer").TimeCircles().stop();
            //2) shuffle Person Object
            shuffle.shuffle(state.generator.user);
            console.log(state.generator.user)

            //3) Display Image  
        }
    });
}

timer.displayTimer();

elements.startButton.addEventListener('click', element => {
    element.preventDefault();
    startGame();
})

Answer 1

Notice your shuffle function return the new array but when you call it at shuffle.shuffle(state.generator.user); you don't assign the return value to nothing...

Try something like:

state.generator.user = shuffle.shuffle(state.generator.user);

Answer 2

Your shuffle method is immutable and your not using the return value of it when you call it.

Remove this line: const newArray = array.slice(); and replace newArray with array