Pull a single item from json and display in html

Question

I have an array in a JSON file and what I want to do is pull a single entry from the array and display it when the page loads. I have gotten partway there using this question and answer , however my attempt to adapt this answer causes the output html block to repeat the array items in sequence instead of simply picking one.

Here is a screenshot of what I get: screenshot of output

I am likely doing something real stupid, and I hope someone can point this out. My script is as follows:

    $.getJSON('recommend.json', function(data) {
    var entry = data[Math.floor(Math.random()*data.length)];

$.each(data, function(entryIndex, entry) {
        var html = '<div class="rec_img"><img src="./recs/' + entry['img'] + '" /></div>'; 
    html += '<span class="rec_title">' + entry['title'] + '</span><p>';
        html += '<span class="rec_author">' + entry['author'] + '</span><p>';
        html += '<span class="rec_blurb">' + entry['blurb']  + '</span>';

        $('#recblock').append(html).fadeIn();
      });
    });

Any questions just let me know.

Answer 1

Cut this:

$.each(data, function(entryIndex, entry) {

The whole purpose of $.each is to iterate over the entire array, which is the opposite of what you want. You're already defining entry earlier as a random entry from the data.

So you'll have:

$.getJSON('recommend.json', function(data) {
    var entry = data[Math.floor(Math.random()*data.length)];

    var html = '<div class="rec_img"><img src="./recs/' + entry['img'] + '" /></div>'; 
    html += '<span class="rec_title">' + entry['title'] + '</span><p>';
    html += '<span class="rec_author">' + entry['author'] + '</span><p>';
    html += '<span class="rec_blurb">' + entry['blurb']  + '</span>';

    $('#recblock').append(html).fadeIn();
});