getJSONが子値を取得できません

Question

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>

問題I祖父母からのデータを得ることができないということです"location" - > "pads" - > "name"などの "launch"配列内のd要素を使用します。しかし、私は、例えば、 "launch"配列から "name"と "net"データを得ることができます。

私はこのウェブサイトで見つかった回答をいくつか試みましたが、どれもうまくいきませんでした。

TL; DR getJSONターゲットを配列内のgrand-child要素にするにはどうすればよいですか？

Answer 1

$.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>'); 
 
    d.location.pads.forEach(function(l){ 
 
     $('#launch-main-name').append('<p class="rocket-main-data">' + l.name + '</p>'); 
 
     l.agencies.forEach(function(a){ 
 
     $('#launch-main-name').append('<p class="rocket-main-data">' + a.name + '</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>

Answer 2

孫にも同じ方法でアクセスできます。 d.location.pads[0].name

これは配列かオブジェクトかを確認する必要があります。基本的には、完全なパスは次のようになります。ここでは

var jString = { // your object } 
jString.launches[0].location.pads[0].name 

Answer 3

はフィドルです：https://jsfiddle.net/5kknehw7/

パッドも配列なので、あまりにも、これをループする必要があります。

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

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