javascript - How do I randomly append JSON data?

Question

I'm currently trying to randomly append the JSON data from google spreadsheet. Any help? Currently, I'm successful in appending the data to a div but it all appears in sequence. How do I randomize it? Thanks

$(document).ready(function() {  

$(function listBooks() {    

$.getJSON("https://spreadsheets.google.com/feeds/list/0Am2EHR2fZWeDdDZmTXhZUkJYZ09xNDhHeXM5Z0ZwQnc/od6/public/values?alt=json-in-script&callback=?", function (data) {  

    $('div#book-list').append('<ul class="items"></ul>');

    $.each(data.feed.entry, function(i,entry) { 

        var item = '<span style="display:none">' + entry.id.$t + '</span>';

        item += '<a href="' + entry.gsx$link1.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link2.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link3.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link4.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';

        $('.items').append('<li>' + item + '</span></li>');

        });

      });


    });

});

Answer 1

You could try this

$(document).ready(function() {  

$(function listBooks() {    

$.getJSON("https://spreadsheets.google.com/feeds/list/0Am2EHR2fZWeDdDZmTXhZUkJYZ09xNDhHeXM5Z0ZwQnc/od6/public/values?alt=json-in-script&callback=?", function (data) {  

    $('div#book-list').append('<ul class="items"></ul>');

    // temporary ul
    $ul = $('<ul></ul>');
    $.each(data.feed.entry, function(i,entry) { 

        var item = '<span style="display:none">' + entry.id.$t + '</span>';

        item += '<a href="' + entry.gsx$link1.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link2.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link3.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';
        item += '<a href="' + entry.gsx$link4.$t + '" onclick="enablesubmit();" target="_blank">Click</a>&nbsp;';


        $ul.append('<li>' + i + '-'+ item + '</span></li>');

        });

        // Shuffle children
        var children = $ul.children();
        children = shuffle (children)
        // Append children
        $('.items').append(children);
      });


    });

});


function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

Shuffle