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

只需将take参数修改为20即可

// Reference button and container
var btn1 = document.getElementById('b1');
var pyr1 = document.getElementById('p1');

// When button is clicked...
btn1.addEventListener('click', function(event) {

  // Reference video
  var vid1 = document.getElementById('v1');

  // Conditions based on state: paused
  if (vid1.paused) {
    vid1.play();
  } else {
    vid1.pause();
  }
  /* Whatever the new state is doesn't matter if...
  || we have either .play or .pause class on button
  || previously and that both classes will toggle
  || at the same time.
  */
  btn1.classList.toggle('play');
  btn1.classList.toggle('pause');
}, false);

// If the mouse leaves the area of container...
pyr1.addEventListener('mouseout', function(event) {

  // If the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 0
    btn1.style.opacity = 0;

    // and make it fade away
    btn1.style.transition = '1s ease';
  }
}, false);

// If the mouse enters the container's area...
pyr1.addEventListener('mouseover', function(event) {

  // if the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 1  
    btn1.style.opacity = 1;

    // and make it fade in
    btn1.style.transition = '1s ease';
  }
}, false);

$(window).load(function() {
      // url used to get the JSON data
      // see modified "take" parameter at the end of the url
      var picarioAPI = "https://meno.picarioxpo.com/xpo/api/v1/designs/search/rca-designs?apiKey=9e8a809e10a1402ebb56907a4e7daeed&skip=0&take=20";

      $.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;
}

Answer 2

如果您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++) {

显示json文件的前20项

2 个答案: