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

我正在从一个包含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');
}

---

}))

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

var emp={
“雇员”：[
{“firstName”：“John”，“lastName”：“Doe”}，
{“姓氏”：“安娜”，“姓氏”：“史密斯”}，
{“名字”：“彼得”，“姓氏”：“琼斯”}，
{“姓氏”：“约翰”，“姓氏”：“彼得森”}，
{“名字”：“托马斯”，“姓氏”：“史密森”}，
{“姓”：“彼得”，“姓”：“乔纳森”}，
{“名字”：“吉姆”，“姓氏”：“多佛森”}，
{“姓”：“凯特”，“姓”：“史密斯”}，
{“姓氏”：“约翰”，“姓氏”：“琼斯”}，
{“firstName”：“Nick”，“lastName”：“Doe”}，
{“firstName”：“Tim”，“lastName”：“Smith”}，
{“姓”：“汤姆”，“姓”：“琼斯”}
]
}
var pagerSize=2；
var pageLast=0；
加载（emp.employees、pageLast、pagerSize）；
$（“#加载程序”）。单击（函数（）{
加载（emp.employees、pageLast、pagerSize）；
});
功能加载（数据、启动、限制）{
var雇员=[]；
对于（变量i=开始；i<开始+限制；i++）{
var对象=数据[i]；
var newElement=$（'
'）.attr（“id”，“emp”+i）.text（object.firstName+''+object.lastName）
员工。推送（新元素）；
}
$（'.js load'）.append（员工）；
$（'.js load'）。追加（
）；
pageLast+=限制；
}

我会在解析之前对响应对象进行切片

它更干净，并且您将限制逻辑保留在工作流之外

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

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

---

使用for循环代替$.each可以显示json内容吗？如果我确实使用for循环，那么在触发事件（例如，单击按钮）时，我以后如何检索更多数据？只需隐藏该结果，并在单击按钮时显示它们。如果我这样做，那么在触发事件（例如，单击按钮）后如何检索更多数据？您可以将限制变量设置为全局变量，并与另一个名为offset的变量配对。然后var data=response.data.slice（偏移量，极限）；偏移量+=极限；我建议您阅读一些关于“分页”主题的内容，内容更广泛：）