Question

我在JSON文件中有一个数组，我想要做的是从数组中提取一个条目并在页面加载时显示它。我已经在那里使用this question and answer，但是我尝试调整这个答案会导致输出html块按顺序重复数组项而不是简单地选择一个。

以下是我得到的截图： 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();
});

从json中提取单个项目并以html

1 个答案: