javascript - 显示 json 文件的前 20 项

Question

我有一个外部 Json 文件，用于显示站点内的图像。我需要将显示限制为仅显示 20 张图像，然后向下滚动时显示其余图像。

$(window).load(function() {
  // url used to get the JSON data
  var picarioAPI = "https://meno.picarioxpo.com/xpo/api/v1/designs/search/rca-designs?apiKey=9e8a809e10a1402ebb56907a4e7daeed&skip=0&take=1024";

  $.getJSON(picarioAPI, function(json) {
    var text = "";
    for (var i = 0; i < json.values.length; i++) {
      //alert(json.values[i].displayUrl);
      text += '<div class="prod" style="float:left;"><a href="{{ product.url }}/collections/designs?designid=' + json.values[i].id + '&designWidth=' + json.values[i].width + '&designHeight=' + json.values[i].height + '&designName=' + json.values[i].name + ' &designThumb=' + json.values[i].storagePath + '"><img src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></div>';
      document.getElementById("design").innerHTML = text;
    }


  });

});

#design {
	margin:20px;
}
#design img {
	width:200px;
	margin:10px;
    max-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="design"></p>

Answer 1

如果您的 json 中总是有超过 20 个结果，只需替换...

 for (var i = 0; i < json.values.length; i++) {

...与...

 for (var i = 0; i < 20; i++) {

...就可以了。但是，每次 json.values 的项目少于 20 时，这都会导致错误。

这就是为什么您需要首先检查是否有超过 20 个结果。如果有，则将限制设置为20，如果没有，则将迭代限制设置为json.values.length。 (json.values.length 中的项目数)。
因此只需用此替换上面的行即可。

 for (var i = 0; i < Math.min(json.values.length, 20); i++) {