Wie können Daten aus einer API extrahiert und angezeigt werden?

Question

Ich versuche, die API-Daten von einer Website herunterzuladen und anzuzeigen. Hier ist der Code, den ich gerade verwende:

 function loadJSON(file, callback) { 

     var xobj = new XMLHttpRequest(); 
     xobj.overrideMimeType("application/json"); 
     xobj.open('GET', file, true); 
     xobj.onreadystatechange = function() { 
      if (xobj.readyState == 4 && xobj.status == "200") { 
       callback(xobj.responseText); 
      } 
     }; 
     xobj.send(null); 
    } 
     var outerSpace; 
     loadJSON("http://api.open-notify.org/astros.json", gotData); 

     function gotData(data) { 
      outerSpace = data; 
     } 

     if (outerSpace) { 
     console.log(outerSpace.people.name); 
     } 

Dies ist die vollständige API (nicht viel).

{ 
"number": 3, 
"message": "success", 
"people": [ 
{ 
"name": "Peggy Whitson", 
"craft": "ISS" 
}, 
{ 
"name": "Fyodor Yurchikhin", 
"craft": "ISS" 
}, 
{ 
"name": "Jack Fischer", 
"craft": "ISS" 
} 
] 
} 

Sollte nicht console.log Ausgabe "Peggy Whitson"? Ich bekomme keine Fehlermeldungen, aber die Konsole empfängt keine Nachrichten. Wenn mir jemand helfen könnte, eine Lösung zu finden, würde ich es sehr zu schätzen wissen. Vielen Dank!

Answer 1

Ich denke, die anderen Antworten sind schön und gut, ich wollte nur darauf hinweisen, wo ich das Missverständnis denken liegt:

// Here you create the callback. 
    // It will run later when the ajax-call completes. 
    function gotData(data) { 
    outerSpace = data; 
    } 

    // This however runs immediately and only once. 
    // outerSpace will *always* be undefined at this point 
    // Because gotData has not yet completed. 
    // (The whole thing about ajax-calls are that they complete *later*.) 
    if (outerSpace) { 
    console.log(outerSpace.people.name); 
    } 

Sie if behandeln, als ob es when (leider bedeuten könnte, gibt es keine solche Sache) Alles, was Sie haben, ist Ihr Rückruf, also müssen Sie Ihre Logik dort:.

function gotData(data) { 
    outerSpace = data; 
    if (outerSpace) { 
     console.log(outerSpace.people.name); 
    } 
    } 

Answer 2

Es gibt zwei Probleme. Ihre Funktion gotData Ihre Daten als String wird geladen, so dass Sie diese Zeichenfolge in JSON analysieren müssen:

function gotData(data) { 
    outerSpace = JSON.parse(data); 
} 

Zweitens ist es, Menschen ein Array, wenn Sie also nur einen der Namen greifen wollen, müssen Sie die angeben Index dieses Objekts.

if (outerSpace) { 
    console.log(outerSpace.people[0].name); 
}