javascript - getJSON 无法获取子值

标签 javascript jquery html arrays json

我正在从 API 获取数据。 API 的格式如下:

{
   "total":1,
   "launches":[
  {
     "name":"Falcon 9 Full Thrust | BulgariaSat-1",
     "net":"June 23, 2017 18:10:00 UTC",
     "location":{
        "pads":[
           {
              "name":"Launch Complex 39A, Kennedy Space Center, FL",
              "agencies":[
                 {
                    "name":"SpaceX"
                 },
                 {
                    "name":"National Aeronautics and Space Administration"
                 }
              ]
           }
        ],
        "name":"Kennedy Space Center, FL, USA"
     },
     "rocket":{
        "name":"Falcon 9 Full Thrust",
        "agencies":[
           {
              "name":"SpaceX"
           }
        ],
        "infoURL":"http://www.spacex.com/falcon9"
     },
     "missions":[
        {
           "name":"BulgariaSat-1"
        }
     ]
  }
   ],
   "count":1
}

我用来检索 JSON 的 jQuery 是:

$.getJSON('https://launchlibrary.net/1.2/launch/next/1', function(data) {
  data.launches.forEach(function(d) {
    $('#launch-main-name').append('<p class="rocket-main-data">' + d.name + '</p>');
    $('#launch-main-date').append('<p class="rocket-main-data">' + d.net + '</p>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="launch-main-name"></p>
<p id="launch-main-date"></p>

我遇到的问题是我无法从“launches”数组中的孙子元素获取任何数据:例如“location”->“pads”->“name”。但我能够从“启动”数组中获取“名称”和“网络”数据。

我尝试了在该网站上找到的一些答案,但没有一个有效。

TL;DR 如何使我的 getJSON 目标为数组中的孙元素?

最佳答案

这是一个 fiddle :https://jsfiddle.net/5kknehw7/

Pads 也是一个数组,因此也必须对其进行循环。

data.launches.forEach(function(d) {
  console.log(d.name);
  console.log(d.net);

  d.location.pads.forEach(function(p) {
    console.log(p.name);
  });
});

关于javascript - getJSON 无法获取子值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44694676/

相关文章:

javascript - 用于按顺序排列项目的替代输入控件

html - 如果这两种样式具有相同的 css 属性,为什么它们呈现不同?

javascript - 动画 scrollTop 触发滚动事件

javascript - 交换图像的过渡

javascript - 单击上\下\左\右按钮时如何在div中移动圆圈

javascript - 单引号内的单引号会导致错误

jquery - 使用 CSS 和 JQuery 在页面之间创建滑动

html - phonegap 在浏览器中打开链接

javascript - getBoundingClientRect() 返回错误的宽度

javascript - 使用 indesign 脚本上传到 ftp 文件夹