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.

Don't "shuffle" both arrays; just the second one. Then reference the first one with the random value of the second one. — Xyan Ewing, Sep 05 '12 at 17:59
What I understand of your question is that there's a condition between the resulting order of each array. If that is the case, then the shuffling is not really independent. Is this correct? — juan.facorro, Sep 05 '12 at 18:00

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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]];
}

score 0 · Answer 2 · edited May 23 '17 at 11:58

First, shuffle one array with your favorite algorithm, e.g. 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);

The standard algorithm from the linked answers/questions. – Bergi Sep 05 '12 at 18:48 — Bergi, Sep 05 '12 at 18:48

yngccc · Answer 3 · 2012-09-05T18:52:35.960

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;  
  }  
}

How to randomize this kind of two different javascript arrays

3 Answers3

You need to create two functions.