jquery - 使用 jQuery .each 显示 json 数组

Question

我有一个要从中提取数据的 json 文件。当 json 文件不在数组中时，一切正常。我想问题是我不知道如何在我的 .each 函数中选择正确的数据。这是示例 json 文件：

{
   "chapter1": [
      {
         "title":"This is the title",
         "chapter":"1",
         "verse":"1",
         "text":"text goes here"
      },
      {
         "verse":"4",
         "text":"text goes here"
      },
      {
         "verse":"6",
         "text":"text goes here"
      }
   ],

   "chapter2": [
      {
         "title":"This is the title",
         "chapter":"2",
         "verse":"1",
         "text":"text goes here"
      },
      {
         "verse":"4",
         "text":"text goes here"
      },
      {
         "verse":"6",
         "text":"text goes here"
      }
   ]
}

这是我显示数据的循环：

$.getJSON(passages, function(data) {
    $.each(data, function() {
        $('#chapter1 h2').append(this.title);
        $('#chapter1 h3').append(this.chapter);
        $('#verses').append('<li><p>' + this.verse + this.text + '</p></li>');    
    });
});

当我从 json 文件中删除“chapter2”数据时，一切正常。我想显示“第 1 章”内容和“第 2 章”内容。

Answer 1

出于某种原因，它围绕每个元素的成员创建了一个数组。title假设这是一致的，您可以chapter像这样访问：

$("#chapter1 h2").append(this[0].title);
$("#chapter1 h3").append(this[0].chapter);

编辑：如果您自己创建 JSON，您可能应该将其格式更改为如下所示：

"chapter": {
   "title": "the title",
   "chapter": "the chapter",
   "verses": [
      {"verse": "1", "text": "text 1"},
      {"verse": "4", "text": "text 2"}
   ]
}

这将适用$.each于您的问题

Answer 2

json 格式不正确，每章的 json 应如下所示：

    "chapter1": {
       "title":"this is the title",
       "chapter":"1",
       "verses":[
          {
             "verse":"1",
             "text":"some text"
          },
          {
             "verse":"2",
             "text":"some other text"
          },
      ]
   }

编辑：更改 JSON 后，您的代码应如下所示：

$.getJSON(passages, function(data) {
    $.each(data, function() {
        $('#chapter1 h2').append(this.title);
        $('#chapter1 h3').append(this.chapter);
        $.each(this.verses,function(){
           $('#verses').append('<li><p>' + this.verse + this.text + '</p></li>');     
        });
    });
});