Question

为什么我得到＆＃39; undefined＆＃39;什么时候尝试从Public API中提取特定数据？以下代码有什么问题？

<body>
<button type="button" onclick="gget();">Click</button>
<p id="MyDiv"> </p> </body>

<script>function gget(){
   var btc = new XMLHttpRequest();
   btc.open('GET', "https://api.coinmarketcap.com/v1/ticker/bitcoin/", true);
   btc.onreadystatechange = function() {
       if(btc.readyState == 4) {
          var data = JSON.parse(btc.responseText);
          var price = data.id;
          document.getElementById('MyDiv').innerHTML = "$"+price;
    }};
    btc.send();
    } </script>

Answer 1

https://api.coinmarketcap.com/v1/ticker/bitcoin/返回一个包含1个对象的数组。

您想访问data[0].id以访问该第一个/唯一元素的ID。您正在寻找的价格可能是data[0].price_usd。

Answer 2

要添加到Jeto的答案，代码看起来像这样，假设您想要以美元为单位的价格。

function gget(){
  var btc = new XMLHttpRequest();
  btc.open('GET', "https://api.coinmarketcap.com/v1/ticker/bitcoin/", true);
  btc.onreadystatechange = function() {
    if(btc.readyState == 4) {

      var data = JSON.parse(btc.responseText);
      var price = data[0].price_usd;
      document.getElementById('MyDiv').innerHTML = "$"+price;
    }};
  btc.send();
}

此外，您可以在错误情况下向用户提供反馈。

function setPriceLabel(value){
  document.getElementById('MyDiv').innerHTML = value;
}

function gget(){
  var btc = new XMLHttpRequest();
  btc.addEventListener("error", function(){
    setPriceLabel("Could not fetch price from server");
  });
  btc.open('GET', "https://api.coinmarketcap.com/v1/ticker/bitcoin/", true);
  btc.onreadystatechange = function() {
    if(btc.readyState == 4) {
        try{
          var data = JSON.parse(btc.responseText);
          console.log(data)
          var price = data[0].price_usd;
          setPriceLabel("$"+price);
        }
        catch(e){
          setPriceLabel("Server sent bad data");
        }
    }};
  btc.send();
}

btc.addEventListener块将捕获HTTP错误并将价格标签设置为错误消息。

除了HTTP错误之外，JSON解析函数也可能失败。由于JSON.parse是一个同步函数，我们可以使用try-catch语法处理它的错误。

得到＆＃39; undefined＆＃39;从API请求数据时

2 个答案: