Display the first 20 items of a json file

Question

I have a external Json file that displays images within the site. I need to limit the display to only 20 images then when you scroll down show the rest.

$(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>

So only output the first 20 instead of looping over all of them? — epascarello, Feb 23 '17 at 16:49
@epascarello I think the question is more about how to do the facebook scroll — Logar, Feb 23 '17 at 16:50
So then when they scroll to the end they load the next set..... Basics of Lazy Loading — epascarello, Feb 23 '17 at 16:50
Take a look at this question : http://stackoverflow.com/questions/10404699/how-does-facebook-achieve-infinite-scrolling — Logar, Feb 23 '17 at 16:52

score 2 · Answer 1 · edited Feb 23 '17 at 17:29

Just modify the take parameter to 20

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

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

tao · Accepted Answer · 2017-02-23T17:26:33.587

2

If you're always going to have more than 20 results in your json, just replacing...

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

...with...

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

...will do. However, this will result in an error every time your json.values will have less than 20 items.

This is why you need to check if there are more than 20 results first. If there are, set limit to 20, if not, set the iteration limit to json.values.length. (number of items in json.values.length).
So just replace the line above with this.

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

edited Feb 23 '17 at 17:26

answered Feb 23 '17 at 17:04

tao

59,850
12
84
110

2

`Math.min(json.values.length, 20)` is cleaner – mhodges Feb 23 '17 at 17:20
1

@mhodges Correct. Updated. Thank you. – tao Feb 23 '17 at 17:26
@mhodges It really looks like, even though my answer is correct programmatically, the proper solution is to only require 20 items by changing the `$_GET` param, as @Brent's answer suggests. That's the sane thing to do. In which case checking length on results is no longer required. :) – tao Feb 23 '17 at 17:32
How do you load the rest of the string when you scroll down? – MPummel Feb 23 '17 at 17:49
You'd need to store the index of last displayed item, have an element in your page that could initiate a function that would access that information, load 20 more items from the json, compose the required string and append it to the existing content. It can be done both client side and server side. If you only bring 20 items at a time, you need server side. If yo bring them all at once and save them in browser storage, it's going to be client side. I'd do it client side. One call and than just displaying more from already loaded data. It gives you better control on user experience, IMHO. – tao Feb 23 '17 at 18:00
But that's a completely different question than the initial one. It is recommended you ask it separately, so other people could benefit from it being properly indexed and answered. – tao Feb 23 '17 at 18:05

Display the first 20 items of a json file

2 Answers2