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++) {