0

I'm trying to randomize a standard loop function. Here's the original loop :

success: function(data) {
for (var i = 0; i < 15; i++) {
  $("#myimages").append("<a href='" + data.data[i].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[i].images.standard_resolution.url + "' /></a>");
  }
}

Could anyone help me out. I've had no luck so far.

detonate
  • 289
  • 2
  • 11
  • 21

3 Answers3

0

Here's a fiddle showing 15 numbers being randomized and then looped through: http://jsfiddle.net/pH6Lx/ .

function Shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};

$(document).ready(function() {
//init array
var testArray = [];

//Fill it with 15 numbers    
for(var i=0;i<15;i++)
    testArray.push(i);

//Shuffle it ("randomize")    
Shuffle(testArray);

//Do something with these numbers    
 for (var i=0;i<testArray.length;i++) {
     $('#random').append(testArray[i]+'<br />');
   }
});

In your case this might all happen inside your callback instead.

Tor
  • 784
  • 1
  • 13
  • 25
  • I noticed there's a jsonp call, would this affect the script? – detonate Aug 14 '13 at 19:35
  • You should be able to replace my document.ready with your success: function(data) event, and then put your .append where mine is. In the end it's just a loop, except here the values between 0 and 15 are randonmized. Without your full script, it's impossible to test if it will all work together. – Tor Aug 14 '13 at 19:39
  • Torrobinson, they've pointed me out to the source, it's a Codepen http://codepen.io/projectaaron/pen/Foyhp – detonate Aug 14 '13 at 20:31
  • Does this do the trick? http://cdpn.io/tlCho – Tor Aug 14 '13 at 20:46
  • It does, thanks a bunch Torrobinson! You rocked my day!!! – detonate Aug 14 '13 at 20:59
0

First, just randomize the array, see: How to randomize (shuffle) a JavaScript array?.

success: function(data) {
    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    shuffleArray(data);

Then proceed as before:

    for (var i = 0; i < 15; i++) {
        $("#myimages").append("<a href='" + data.data[i].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[i].images.standard_resolution.url + "' /></a>");
    }
}
Community
  • 1
  • 1
Lyn Headley
  • 11,368
  • 3
  • 33
  • 35
0

if you are passing a list of images in data.data is possible to do as below

 success: function(data) {

    var numberOfImages = Math.min( 15, data.data.length ) ; //bug free to don't repeat        
    var alreadyShow = {}; //to don't repeat


    for (var i = 0; i < numberOfImages ; i++) {

        do{

            var imgIndex = Math.round( Math.random() * ( data.data.length - 1 ) );    

        }while( alreadyShow[imgIndex] );

        alreadyShow[imgIndex] = true;    

        $("#myimages").append("<a href='" + data.data[imgIndex].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[imgIndex].images.standard_resolution.url + "' /></a>");
      }
    }

it's randomize without repeat

Luan Castro
  • 1,184
  • 7
  • 14