如何从 API 中提取和显示数据？答案

【问题标题】：How to extract and display data from an API?如何从 API 中提取和显示数据？
【发布时间】：2017-07-25 02:04:11
【问题描述】：

我正在尝试从网站下载并显示 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”吗？我没有收到任何错误消息，但控制台没有收到任何消息。如果有人可以帮助我找到解决方法，我将不胜感激。谢谢！

【问题讨论】：

首先，删除 if 语句，以便查看服务器是否收到 404 或 500 错误：[if (xobj.readyState == 4 && xobj.status == "200") {回调（xobj.responseText）； }]
另外people是一个数组，所以不能直接调用people.name。使用outerSpace.people[0].name 获取名字。
@Abiezer 没有错误信息。
@Racil Hilan 仍然没有记录任何内容。
我说也是因为这不是主要问题。如果这是主要问题，我会将其发布为答案而不是评论。但是一旦你解决了主要问题，你就会在这一行出现错误，需要修复它。

标签： javascript json

【解决方案1】：

我认为其他答案都很好，我只是想指出我认为误解在哪里：

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

【讨论】：

【解决方案2】：

有两个问题。您的函数 gotData 将您的数据作为字符串加载，因此您需要将该字符串解析为 JSON：

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

其次，people 是一个数组，所以如果你只想获取其中一个名称，则需要指定该对象的索引。

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

【讨论】：

我没有收到任何错误消息，但仍然没有控制台消息。这是我的代码：codepad.co/snippet/5WJlz3Lh
您可以在代码的前面添加日志记录。例如，我可能会在测试时在 gotData 函数中添加 console.log(data)，以查看您是否正确检索数据。