如何限制从Json（客户端）检索的数据量？

Question

我正在从55个条目的Json对象中检索数据，但我想将其限制为10个项目。 这是什么最好的做法？

如果我以后想要点击一个按钮并加载更多数据（让我们说10或25个项目），该怎么办？

我的代码：

$.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');
}

}）;

Answer 1

这是一个简单的演示。 我声明了两个变量（pagerSize，pageLast），它们保留了寻呼机大小和当前页面索引。 然后每次单击该按钮时，我都会获取下一个数据，将它们推送到一个数组并将它们附加到文档中。 我在这里将寻呼机设置为仅两个元素，您可以轻松地将其嵌入到代码中。

 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> 

Answer 2

我将解析响应对象切片。

它更清洁，您可以将限制逻辑保留在工作流程之外。

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

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