Json loop to randomize every page refresh

Question

I have a JSON file with the below data (just an example of what I have) and I am using this data with handlebars.js to create templates.

The issue I am having is that I need to show 15 stories (in their on divs) on page load however on every page refresh I want the stories to be in different positions on the page.

I guess my simplest question is - how do I randomise each item and still only show 15 stories?

Here is the example of my JSON file (but imagine with over 20 stories)

{
    "stories": [{
        "realTime": [{
            "id": "realTime",
                "icon": "link",
                "info": {
                "title": "Video box",
                    "type": "Link",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://twitter.com"
            }
        }, {
            "id": "realWorld",
                "icon": "file-text",
                "info": {
                "title": "PDF box",
                    "type": "PDF",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }, {
            "id": "realResults",
                "icon": "comments",
                "info": {
                "title": "Blog here",
                    "type": "Blog",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }, {
            "id": "realTime",
                "icon": "comments",
                "info": {
                "title": "Blog here",
                    "type": "Blog",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }]
    }]
}

Here is the jQuery I am using to retrieve the JSON data along with the handlebars.js compile code.

$.getJSON('./assets/json/stories.json', function(data) {
        var source   = $("#block-template").html();
        var template = Handlebars.compile(source);
        $('#block-div').html(template(data));
});

Shuffle the array of objects, then pull the first 15. Or, randomly pull 15 of the objects out of the array. — Kevin B, Oct 16 '13 at 21:46
See http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript — Ethan Brown, Oct 16 '13 at 21:47

score 3 · Accepted Answer · answered Oct 16 '13 at 21:51

3

You could use _.sample to take n random elements from the list:

var sample = _.sample(data.stories[0].realTime, 15);
var template = Handlebars.compile(sample);

answered Oct 16 '13 at 21:51

McGarnagle

101,349
31
229
260

This is great and so simple - thanks for that! Taken me ages to work this out. – CarlTaylor1989 Oct 16 '13 at 22:03
I know this might be a separate question in itself but will ask anyway - is there a way to get the remaining data that was not selected in a new array? – CarlTaylor1989 Oct 16 '13 at 22:13
@CarlTaylor1989 for that, I think the easiest way would be to use `_.shuffle`, and then `slice` (eg: http://jsfiddle.net/DS7CS/1/) – McGarnagle Oct 16 '13 at 22:26

Json loop to randomize every page refresh

1 Answers1