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

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

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

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

2 个答案: