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

我试图从网站下载并显示API数据。这里是我目前使用的代码：如何从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”？我没有收到错误消息，但控制台没有收到消息。如果有人能帮我找到解决办法，我将不胜感激。谢谢！

来源

2017-07-25 matthew kap

第一，删除if语句，所以你可以看到，如果你有来自服务器的404或500错误： [IF（xobj.readyState == 4 && xobj.status == “200”）{ callback（xobj.responseText）; }] – Abiezer

另外'people'是一个数组，所以你不能直接调用'people.name'。使用'outerSpace.people [0] .name'获取名字。 –

@Abiezer没有错误信息。 –

我觉得其他的答案都很好，我只是想，我认为误解在于指出：

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

来源

2017-07-25 02:39:16 ippi

有两个问题。你的功能gotData加载数据作为一个字符串，所以你需要解析字符串转换成JSON：

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

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

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

来源

2017-07-25 02:24:02 zachdb86

我没有收到错误消息，但仍然没有控制台消息。以下是我的代码：https://codepad.co/snippet/5WJlz3Lh –

您可以在代码的早期添加日志记录。例如，我可能会在测试时在您的gotData函数中添加'console.log（data）'来查看您是否正确检索了数据。 – zachdb86

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

回答

相关问题