如何从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);
    }
  }