How to remove random item from array and then remove it from array until array is empty

Question

I am trying to remove a random item from an array until the array is empty using jquery or javascript. I need to console out each time the random item. Basically i am going to create an element with a random image from the given array until all images have been created.

Here is my attempt for getting the random item and removing from array but it it does not go through the entire array-I am stumped.

"load": function(){
    var imgArray = ['brain', 'mitochondria', 'microsope', 'beaker', 'beaker-2', 'scientist', 'cell', 'atom', 'dropper'];
    function randomItem(array){
        var arrayLength = array.length+1;
        console.log(arrayLength);
        for(var i = 0;i<array.length;i++){
            var item = array[Math.floor(Math.random()*array.length)];
            array.pop(item);
            console.log(array);
        }
    }
    randomItem(imgArray);
},

Here is my console output:

10
home.js:12 ["brain", "mitochondria", "microsope", "beaker", "beaker-2", "scientist", "cell", "atom"]
home.js:12 ["brain", "mitochondria", "microsope", "beaker", "beaker-2", "scientist", "cell"]
home.js:12 ["brain", "mitochondria", "microsope", "beaker", "beaker-2", "scientist"]
home.js:12 ["brain", "mitochondria", "microsope", "beaker", "beaker-2"]
home.js:12 ["brain", "mitochondria", "microsope", "beaker"]

Solution 1

The function, Array.prototype.pop() will remove an element from the last. So at this context, you have to use Array.prototype.splice(indext,cnt),

for(var i = array.length-1;i>=0;i--){
  array.splice(Math.floor(Math.random()*array.length), 1);
  console.log(array);
}

And since we are altering the array, we have to traverse it in reverse way, so that the index will not be collapsed.

Solution 2

Just make a random index and splice while length is greater than zero.

var data = ["brain", "mitochondria", "microsope", "beaker", "beaker-2", "scientist", "cell", "atom"];

while (data.length) {
    document.write(data.splice(data.length * Math.random() | 0, 1)[0] + '<br>');
}

Solution 3

Array.prototype.pop removes the last element from the array, not a specific element. To remove an element at a specific index you can use Array.prototype.splice (See: How do I remove a particular element from an array in JavaScript? ).

You also have a problem with for(var i = 0;i<array.length;i++), since array.length changes whenever you remove an item, you'll only get through half the array, you can either loop in reverse for ( var i = array.length; i--; ), so that array.length is only evaluated once, before the first iteration, or you can use a while loop while( array.length ).

Change your loop to:

while( array.length ) {
    var index = Math.floor( Math.random()*array.length );
    console.log( array[index] ); // Log the item
    array.splice( index, 1 ); // Remove the item from the array
}

Comments

[Travis Michael Heller]

thank you so much! Definitely will be diving more into the documentation on arrays.

[Rajaprabhu Aravindasamy]

@TravisMichaelHeller Glad to help! :)

[Travis Michael Heller]

Thank you for the other option. I didn't think about using the while loop as that makes plenty of sense now that i think about it.

[Travis Michael Heller]

Thank you for taking the time to help. I was just telling Nina that a while loop would be the better option for the functionality i am looking for.

[Travis Michael Heller]

Just saw your update, thank you for the explanation. Never thought about looping in reverse. Have not had to mess with arrays in a while but i obviously need to read back into them as i am lacking in knowledge.

[Paul]

@TravisMichaelHeller You could also loop forward like you are used to, but put the array length in a variable first: var numItems = array.length; then for(var i = 0;i<numItems;i++){, because array.length changes when you remove elements but the variable won't be affected.