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();
});