How to randomize this kind of two different javascript arrays

Question

I have two different arrays like this

var images = [{
    "src": "images2/animal_1.jpg",
    "title": "Dog"},

{
    "src": "images2/animal_2.jpg",
    "title": "Cat"},

{
    "src": "images2/animal_3.jpg",
    "title": "Sheep"},

{
    "src": "images2/animal_4.jpg",
    "title": "Cow"}];

var name = ["Dog", "Cat", "Sheep", "Cow"];​

I need to shuffle both arrays independently. But one condition image arrays title and name array value will never come with same index. How can I do that.

Answer 1

You need to create two functions.

The getRandomValue() function will take the array as input and gives you the random index and the value.

function getRandomValue(myArray)
{
    var index = Math.floor(Math.random() * myArray.length);
    return [myArray[index], index];
}

Now you declare your images and names array.

var images = [{
    "src": "images2/animal_1.jpg",
    "title": "Dog"},

{
    "src": "images2/animal_2.jpg",
    "title": "Cat"},

{
    "src": "images2/animal_3.jpg",
    "title": "Sheep"},

{
    "src": "images2/animal_4.jpg",
    "title": "Cow"}];

var name = ["Dog", "Cat", "Sheep", "Cow"];​

Now our main function comes here. First, get the random image by passing in the image array to the randomValue() function. The same way do it for the names. Each value returned will be an array of the value and the index.

Now compare the index and if the indices are different, return both as an array. Else, return to the function to generate another.

function getImgName()
{
    var img = getRandomValue(images);
    var nam = getRandomValue(name);
    if (img[1] != nam[1])
        return getImgName();
    else
        return [img[0], nam[0]];
}

Answer 2

First, shuffle one array with your favorite algorithm , eg the Fisher-Yates-Knuth shuffle .

Now, shuffle the result of that one again, but now with an algorithm that is known to move every element:

function shuffleMove(array) {
    var i = array.length;
    while (--i) {
        // Notice the difference to the normal algorithm:
        // j will be a number different from i
        var j = Math.floor(Math.random() * i);
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

In your case, the use would be:

images.shuffle();
var names = [];
for (var i=0; i<images.length; i++)
    names[i] = images[i].title;
shuffleMove(names);

Answer 3

to shuffle an array, use Knuth's shuffle. To satisfy the condition, every iteration you need to check and re-roll if necessary

for (var i = name.length-1; i > 0; i--) {  
  while(1) {
    var index = Math.floor(Math.random() * i);
    // check condition 
    if (name[index] === images[i].title)
      continue;
    // swap
    var temp = name[i];  
    name[i] = name[index];  
    name[index] = temp;  
    break;  
  }  
}