如何限制從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