无法以复杂的JSON格式访问数据

Question

您能否看一下这个片段，让我知道为什么我无法访问JSON的detail选项中的数据？我想要做的是将firstName，lastName和age加载到每个对象的列表中。

＆＃13;

＆＃13;

var data = {
  "events": [{
    "date": "one",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }, {
    "date": "two",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }, {
    "date": "three",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }]
};
for (p = 0; p < data.events.length; p++) {
  $("p").append(data.events[p].date);
  for (i = 0; i < data.events.detail.length; i++) {
    $("ul").append('<li>'+data.events.detail[i]+'</li>');

  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p></p>
  <ul></ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在你的json中，events是一个数组。但是您正在尝试访问data.events.detail，它应该类似于data.events [p] .detail

Answer 2

首先，你所写的不是技术上的“JSON”，它只是一个JavaScript对象。但是，你走的是正确的道路。目前还不清楚你要求的是什么，但我已经扩展了你必须给你的东西，无论如何都会有所帮助。

var data = {
    "events": [
        {
            "date": "one",
            "event": "",
            "info": "Copenhagen",
            "detail": [
                {
                    "firstName": "Sally",
                    "lastName": "Green",
                    "age": 27
                }
            ]
        }, 
        {
            "date": "two",
            "event": "",
            "info": "Copenhagen",
            "detail": [
                {
                    "firstName": "John",
                    "lastName": "Blue",
                    "age": 22
                }
            ]
        }, 
        {
            "date": "three",
            "event": "",
            "info": "Copenhagen",
            "detail": [
                {
                    "firstName": "Sam",
                    "lastName": "Red",
                    "age": 25
                }
            ]
        }
    ]
};
for (i = 0; i < data.events.length; i++) {
    $(".container").append('<p>' + data.events[i].date + '</p>');
    for (j = 0; j < data.events[i].detail.length; j++) {
        $(".container").append('<ul></ul>');
        $(".container ul:last").append('<li>' + data.events[i].detail[j].firstName + '</li>');
        $(".container ul:last").append('<li>' + data.events[i].detail[j].lastName + '</li>');
        $(".container ul:last").append('<li>' + data.events[i].detail[j].age+ '</li>');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

Answer 3

不要忘记data.events是一个数组，所以你必须在内部for的标题内指定索引

for (i = 0; i < data.events.detail.length; i++) {

必须是

for (i = 0; i < data.events[p].detail.length; i++) {

并且，因为data.events[].detail也是一个数组，所以你也必须指定该索引。

以下代码成功检索到您需要的数据：

＆＃13;

＆＃13;

var data = {
  "events": [{
    "date": "one",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }, {
    "date": "two",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }, {
    "date": "three",
    "event": "",
    "info": "Copenhagen",
    "detail": [{
      "firstName": "Sally",
      "lastName": "Green",
      "age": 27
    }]
  }]
};
for (p = 0; p < data.events.length; p++) {
  $("p").append(data.events[p].date);
  for (i = 0; i < data.events[p].detail.length; i++) {
    $("ul").append(data.events[p].detail[i].firstName + ", " + data.events[p].detail[i].lastName + ". Age: " + data.events[p].detail[i].age);

  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p></p>
  <ul></ul>
</div>

＆＃13;

＆＃13;

＆＃13;