如何從API提取和顯示數據？

Question

我正在嘗試從網站下載並顯示API數據。 這是我當前正在使用的代碼：

      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);
      }

這是完整的API（不多）。

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

console.log是否應該輸出“ Peggy Whitson”？ 我沒有收到任何錯誤消息，但控制台沒有收到任何消息。 如果有人可以幫助我找到修復程序，我將不勝感激。 謝謝！

Answer 1

有兩個問題。 您的功能gotData將數據作為字符串加載，因此您需要將該字符串解析為JSON：

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

其次，people是一個數組，因此，如果您只想獲取其中一個名稱，則需要指定該對象的索引。

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

Answer 2

我認為其他答案也很好，我只想指出我認為誤解的根源：

  // 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);
  }

您對待if好像意味着when （遺憾的是，沒有這樣的事情）所擁有的只是回調，因此您必須將邏輯放在這里：。

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