Randomise Dribbble API call results

Question

I'm currently implementing Jribbble to pull my Dribbble shots into my new portfolio. I've got it set up to be able to pull in all shots I've assigned to a bucket - great!

One extra I'd like to do is to be able to randomise the results that get returned to ensure a good spread of my work is visible.

Current code is:

$.jribbble.setToken('3f99156fa1530d27432a9df8eb315e861d6b2fb4f59acaa210da8962e1427cf2');

            $.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
                var html = [];

                res.forEach(function(shot) {
                    html.push('<li class="shots--shot">');
                    html.push('<a href="' + shot.html_url + '" target="_blank">');
                    html.push('<img src="' + shot.images.normal + '">');
                    html.push('</a></li>');
                });

                $('.shots').html(html.join(''));
            });

Anyone any ideas how I might go about this?

I've also tried randomising the results once they've been called using:

window.onload = function() {
  var ul = document.querySelector('.shots');
  for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
  }
};

But I only get this error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Any help much appreciated!

How about shuffling the Array `res` that you get in the callback? So before iterating over the result. See http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array#2450976 — Martin Schneider, Dec 08 '15 at 12:21
@MartinSchneider that sounds great but I'm at a bit of a loss of how to connect it all together! Any pointers? — DanC, Dec 08 '15 at 12:24
@DanC I agree with Martin - you could create a new array (your html array) and instead of calling forEach, pick random element, push it to the new array, and splice it from the res array. Repeat this as long as the res array has length > 0. — lmenus, Dec 08 '15 at 12:31

score 1 · Accepted Answer · edited May 23 '17 at 10:27

Take the shuffle function found in that SO-Thread How to randomize (shuffle) a JavaScript array?

and add it somewhere in your javascript. Then call that function right before iterating over the results:

function shuffle(array) {
   // [...] shuffle function  
}

$.jribbble.buckets(333465).shots({per_page: 12}).then(function(res) {
   var html = [];

   // shuffle the results
   res = shuffle(res);

   res.forEach(function(shot) {
       html.push('<li class="shots--shot">');
       html.push('<a href="' + shot.html_url + '" target="_blank">');
       html.push('<img src="' + shot.images.normal + '">');
       html.push('</a></li>');
   });

   $('.shots').html(html.join(''));
});

take in mind that this can only shuffle the results returned from the api. So if you have 100 images and the api call returns the last ten shots then it will shuffle between these.

Randomise Dribbble API call results

1 Answers1