jquery - 将大型 JSON 数组加载到 HTML 无序列表中，一次只有 20 个数据条目

Question

我有一个具有以下格式的 JSON 文件:

[
  {
    key1: ["value"], 
    key2: ["value"],
    key3: ["value"]
  },
  {
    key1: ["value"], 
    key2: ["value"],
    key3: ["value"]
  },
 repeat for hundreds of data entries
]

数百个数据条目依此类推。我正在尝试:

a.将这些值加载到 HTML 页面上

b.只做前 20 个条目。

这是迄今为止我的代码:

$.getJSON( "js/test.json", function( data ) {
      var items = [];
      $.each([0,19], function( key, val ) {
        items.push( "<li>" + key + ", " + val + "</li>" );
      });

      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });

但是，尝试这种方式给了我:

0, 0

1, 19

我确信我的代码是极其错误的。我究竟做错了什么？

Answer 1

[0,19]是一个包含两个元素的数组:"0" 和 "19"。如果您想要数组的一部分，请使用 slice .

data.slice(0, 20)

这将返回数组 data 中的元素从索引“0”开始到但不包括索引“20”。 如:

$.each(data.slice(0, 20), function( key, val ) {

这将返回前 20 个元素。

JSFiddle

---

以下是如何从 each 对象中提取属性的示例方法当前正在循环:

$.each(data.slice(0, 20), function( key, val ) {
    items.push( '<li><a href="' + val["key1"] + '">' + val["key2"] + '</a></li>' );
});