getJSON kann keinen Kindwert erhalten

Question

Ich erhalte Daten von einer API. Das Format von der API ist wie folgt:

{ 
 
    "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 
 
}

Die jQuery ich die JSON abrufen verwenden zu bekommen, ist:

$.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>

Das Problem, das ich Ich habe es geschafft, dass ich keine Daten vom Grand-Chil bekommen kann d Element im Array "Launches": wie "location" -> "pads" -> "name". Aber ich kann zum Beispiel die Daten "name" und "net" aus dem Array "launches" bekommen.

Ich habe einige Antworten versucht, die ich auf dieser Website gefunden habe, aber keiner von ihnen hat funktioniert.

TL; DR Wie machst du mein getJSON Ziel das Grand-Kind-Element im Array?

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

Sie können die Enkel auf die gleiche Weise, dh zugreifen. d.location.pads[0].name

Sie müssen sehen, ob es ein Array oder ein Objekt ist. Grundsätzlich wäre der vollständige Pfad sein:

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

Answer 3

Hier ist eine Geige: https://jsfiddle.net/5kknehw7/

Pads ist auch ein Array, so müssen Schleife über diese auch.

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

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