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"></div>
                // <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!

Andy E · Accepted Answer · 2010-09-10 11:31:25Z

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.

NATOR · Accepted Answer · 2010-09-10 11:12:42Z

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() {
    // ...
}

answered Sep 10, 2010 at 11:12

NATOR

5252 gold badges6 silver badges14 bronze badges

Comments

Matt · Accepted Answer · 2010-09-10 11:36:40Z

1

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

edited Sep 10, 2010 at 11:36

answered Sep 10, 2010 at 11:21

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Collectives™ on Stack Overflow

Get Random item using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related