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. — user400654
– user400654, Commented Oct 16, 2013 at 21:46

McGarnagle · Accepted Answer · 2013-10-16 21:51:42Z

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, 2013 at 21:51

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CarlTaylor1989 Over a year ago

This is great and so simple - thanks for that! Taken me ages to work this out.

CarlTaylor1989 Over a year ago

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?

McGarnagle Over a year ago

@CarlTaylor1989 for that, I think the easiest way would be to use _.shuffle, and then slice (eg: jsfiddle.net/DS7CS/1)

Collectives™ on Stack Overflow

Json loop to randomize every page refresh

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related