Question

我有一个JSON文件，格式如下：

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

依此类推数百条数据条目。我想：

一个。将这些值加载到HTML页面上

湾只做前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]是一个包含两个元素的数组：＆＃34; 0＆＃34; ，以及＆＃34; 19＆＃34; 。如果您想要数组的一部分，请使用slice。

data.slice(0, 20)

这将返回数组data中的元素，从索引＆＃34; 0＆＃34; 一直到但不包括 index ＆＃34 ; 20＆＃34; 。如：

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

Answer 2

$.each方法中的

应提及JSON数据而不是[0,19]

$.getJSON( "js/test.json", function( data ) {
      var items = [];
      var i=0;
      $.each(data, function( key, val ) {//<==== data shall be specified instead
        items.push( "<li>" + key + ", " + val + "</li>" );
        if(++i==20) break;//<==== this will break the loop as soon as the counter hits 20
      });
          $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });

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

2 个答案: