jsonから単一の項目を引き出し、htmlで表示

Question

私はJSONファイルに配列を持っています。私がしたいのは、配列から1つの項目を取り出し、ページが読み込まれたときに表示することです。 this question and answerを使用して私はここに途中で行きましたが、この答えを適応させようとすると出力htmlブロックが単純に1つを選択するのではなく配列アイテムを繰り返していました。ここで

は、私が何を得るのスクリーンショットです： screenshot of output

私はおそらく本当の愚かな何かをやっている、と私は、誰かがこれを指摘することができると思います。

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

ご質問は、ちょうど私に知らせて次のように 私のスクリプトです。

Answer 1

カットこの：

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

$.eachの全体の目的は、あなたが何をしたいの反対である配列全体にわたって反復することです。あなたはすでにデータからランダムなエントリとしてentryを先に定義しています。

は、あなたが持っているでしょう：

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