3

I am retrieving data from a Json object with 55 entries, but I would like to limit it to 10 items. What is the best practice for this?

Also what if I later want to click on a button and load more data (let says either 10 or 25 more items)?

My code:

$.ajax({
url: 'data.json',
type: 'GET',
dataType: 'json',
success: function(response) {
    console.log('success!');
    var fixtureHTML = '';

    $.each(response.data, function(key, value) {   
        // do something with data retrieved from JSON


    });

    // Append generated HTML to DOM
    $('.js-load').append(fixtureHTML);

}, // End of Success
error: function() {
    console.log('errror');
}

});

Improve this question
4
  • Use for loop in place of $.each
    – Bilal Iqbal
    Commented Jun 30, 2016 at 11:04
  • can you show that json content?
    – RomanPerekhrest
    Commented Jun 30, 2016 at 11:05
  • If I do use the for loop how would I later retrieve more data when an event is triggered (e.g. click of a button)?
    – user6524633
    Commented Jun 30, 2016 at 11:35
  • just hide that result and when you click on button display them
    – Poonam
    Commented Jun 30, 2016 at 12:09

2 Answers 2

Reset to default
3

I'd slice the response object befor parsing.

It's cleaner and you keep the limiting logic outside the workflow.

...
    var limit = 10;
    var data = response.data.slice(0, limit);

    $.each(data, function(key, value) {   
        // do something with data retrieved from JSON
Improve this answer
2
  • Carlo, If I do this how do I retrieve more data later after an event is triggered (e.g. button is clicked)?
    – user6524633
    Commented Jun 30, 2016 at 15:14
  • You can make the limit variable global and pair with another variable called offset. Then var data = response.data.slice(offset, limit); offset += limit; I suggest you read something about the 'pagination' topic, which is broader and extensive :)
    – Carlo
    Commented Jun 30, 2016 at 15:16
2

Here is a simple demo. I declare two variables (pagerSize, pageLast) which keep the pager size and the current page index. Then each time the button is clicked I fetch the next data, push them to an array and append them to the document. I have set the pager to just two elements here, you can easily embed this in your code.

var emp = {
"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"},
    {"firstName":"John", "lastName":"Peterson"}, 
    {"firstName":"Tomas", "lastName":"Smithson"},
    {"firstName":"Peter", "lastName":"Jonathan"},
    {"firstName":"Jim", "lastName":"Doveson"}, 
    {"firstName":"Kate", "lastName":"Smith"},
    {"firstName":"John", "lastName":"Jones"},
    {"firstName":"Nick", "lastName":"Doe"}, 
    {"firstName":"Tim",	"lastName":"Smith"},
    {"firstName":"Tom", "lastName":"Jones"}
]
}

var pagerSize = 2;
var pageLast = 0;       

load(emp.employees, pageLast, pagerSize);

$('#loader').click(function(){
   load(emp.employees, pageLast, pagerSize);
});

function load(data,start,limit){  
  var employees = []; 
  for(var i = start; i < start+limit; i++) {
      var object = data[i];
      var newElement = $('<p/>').attr("id", "emp"+i).text(object.firstName+' '+object.lastName)
      employees.push(newElement);
  }
  $('.js-load').append(employees);
  $('.js-load').append("<hr>");
  pageLast+=limit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="loader" value = "load more"/>
<hr>
<div class="js-load"></div>

Improve this answer