Wie kann die Anzahl der von Json abgerufenen Daten begrenzt werden (Client-Seite)?

Question

Ich erhalte Daten von einem Json-Objekt mit 55 Einträgen, aber ich möchte es auf 10 Elemente beschränken. Was ist die beste Vorgehensweise dafür?

Auch was, wenn ich später auf einen Knopf klicken und mehr Daten laden will (lassen Sie entweder 10 oder 25 mehr Punkte sagen)?

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

});

Answer 1

Hier ist eine einfache Demo. Ich deklariere zwei Variablen (pagerSize, pageLast), die die Pager-Größe und den aktuellen Seitenindex beibehalten. Dann hole ich bei jedem Klick auf die Schaltfläche die nächsten Daten, schiebe sie in ein Array und füge sie an das Dokument an. Ich habe den Pager hier auf nur zwei Elemente eingestellt, Sie können dies einfach in Ihren Code einbetten.

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", \t "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

Ich würde das Antwortobjekt vor dem Parsen in Scheiben schneiden.

Es ist sauberer und Sie behalten die begrenzende Logik außerhalb des Arbeitsablaufs.

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

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