Get Random item using jQuery

Question

Just starting learning about ajax requests using jQuery. I've tried looking at other posts on this but not sure how to implement it. Here's the code I have. Right now it's just getting the first 3 items. I want it to get 3 random items from the rss feed it's pulling. Here's what I have:

jQuery(document).ready(function($) {
    $.ajax({
        url: "http://thrive.local/wp-content/themes/thriveafrica/fetcher.php",
        type: "GET",
        success: function(d) {
                $('item', d).slice(0, 3).each(function() {
                    var $item = $(this);
                    var title = $item.find('title').text();
                    var link = $item.find('link').text();
                    var description = $item.find('description').text();
                    var image = $(description).find('img').attr('src');
                    var price = $(description).find('span.SalePrice').text();
                    if (price == '') {price = 'Visit Store for Price'};

                    var html = '<li><a href="'+link+'" target="_blank">';
                    html += '<div class="image"><img src="'+image+'"></div>';
                    html += '<div class="info"><strong>'+title+'</strong><br/>'+price+'</div>';
                    html += '</a></li>';

                    // Example Output
                    // <li>
                // <div class="image"><img src="http://www.thriveafricastore.com/product_images/s/041/coffee__59525_thumb.jpg"&gt;&lt;/div&gt;
                // <div class="info"><strong>Thrive Africa Blend (1lb)</strong><br>See Price</div>
              // </li>


                    $('div#store ul').append($(html));
                }); //End Each
        } //End Success
    }); // End Ajax Request
});

What are my options?

Thanks!

Answer 1

you could use the shuffle-plugin to shuffle your array. the code would be something like:

var myresults = $('item', d).shuffle();
myresults.slice(0, 3).each(function() {
    // ...
}

Answer 2

I'd use something like filter(), rather than slice(), after generating 3 unique numbers in your range:

var rnd1, rnd2, rnd3, undef,
    items = $('item', d);

// Generate our random numbers:
rnd1 = Math.floor(Math.random()*items.length);
while (rnd2 == undef || rnd2 == rnd1)
    rnd2 = Math.floor(Math.random()*items.length);
while (rnd3 == undef || rnd3 == rnd1 || rnd3 == rnd2)
    rnd3 = Math.floor(Math.random()*items.length);

//filter our items, only the ones whose index matches one of our randoms:
items.filter(function (index) { 
    return index == rnd1 || index == rnd2 || index == rnd3;
}).each(function {
    // rest of code...
});

Be warned that this would stick in an infinite loop if the number of items returned is less than 3, because it generates 3 unique numbers within the range 0 - items length. You could take away the while loops and just generate 3 non-unique randoms if this was a possibility.

Here's an example that removes 3 divs at random using this code: http://jsfiddle.net/dAjAt/. Keep clicking the Run button to see it in action.

Answer 3

If you only want 3 items, your server should only return 3 items.

Non-the-less, if you want to achieve this with JavaScript:

jQuery.fn.random = function (amount) {
  var els = this.get();
  var ret = [];

  while (els.length && ret.length < amount) {
    ret.push(els.splice(Math.floor(Math.random() * els.length), 1)[0]);
  }

  return $(ret);
}

Then instead of using $('item', d).slice(0, 3).each, simply use $('item', d).random(3).each

Answer 4

I'm using a shuffle-like plugin now but I'm all about slim code so I might go with Matt's answer instead. Thanks guys!