HandlebarsJS How to get random values from JSON - json

Question

Is there a way to get random values from a JSON file? My JSON contains a lot of content based on same musical artist, so I wanted to display data more randomly and add a show more button afterwards...
so my JSON looks something like this:
[
data: [{
"name" : "rihanna",
"song" : "pour it up"
},
{
"name" : "rihanna"
"song" : "diamonds"
},
{
"name" : "ladygaga"
"song" : "lovegame"
},
{
"name" : "ladygaga"
"song" : "lovegame"
},
{
"name" : "ladygaga"
"song" : "pokerface"
},
{
"name" : "ladygaga"
"song" : "alejandro"
},
{
"name" : "fergie"
"song" : "fergalicious"
},
{
"name" : "fergie"
"song" : "clumsy"
},
etc etc
So, is there a way to achieve this?

Answer 1

Try this :)
var random = Math.floor(Math.random() * jsonObject.length);
var rData = jsonObject[random];
P.S. : Where jsonObject ist your data property.

Answer 2

Here is how you can acheive it. PLUNKER
$(document).ready(function() {
$('button').on('click', function() {
getRandom();
var html = template(context);
$('#artistlist').html(html);
});
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var musicArray = [{
"name": "rihanna",
"song": "pour it up"
}, {
"name": "rihanna",
"song": "diamonds"
}, {
"name": "ladygaga",
"song": "lovegame"
}, {
"name": "ladygaga",
"song": "lovegame"
}, {
"name": "ladygaga",
"song": "pokerface"
}, {
"name": "ladygaga",
"song": "alejandro"
}, {
"name": "fergie",
"song": "fergalicious"
}, {
"name": "fergie",
"song": "clumsy"
}];
var context = {
music: []
};
var musicClone = $.extend(true, [], musicArray);
function getRandom() {
var i = 2;
while (i-- && musicClone.length >= 1) {
var random = Math.floor(Math.random() * musicClone.length);
var data = musicClone[random];
context.music.push(data);
musicClone.splice(random, 1);
}
}
});