Question

我正在尝试使用API获取货币价格数据，但是不知何故该数据未显示在页面上。在浏览器中，控制台可以正常运行。

任何帮助将不胜感激。谢谢！

输出：

价格：未定义

我的代码：

<script>

    $(function (){

        var $data = $('#data');

        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
            success: function(data) {

                console.log(data);

                $.each(data, function([i, price) {
                    $data.append('<li>price:  '+ price.rate + '</li>');
                });

            }
        });
    });

</script>

<ul id="data"></ul>

Answer 1

为您提供了一个可行的示例，您必须像所执行的那样循环获取所获得的 JSON 的 rate 标签，而不是根目录。另外，您的代码中丢失了“ [” 。

$(function()
{
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
        success: function(data)
        {
            console.log(data);
            
            $.each(data.rates, function(i, price)
            {
                $('#data').append('<li>price:  ' + price.rate + '</li>');

            });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="data"></ul>

Answer 2

您获取的网址未返回数组。响应是一个对象，其费率嵌套在第二级。

{
  "rates": {
    "EURUSD": {
        "rate": 1.157282,
        "timestamp":1539727098144
    }
  },
  "code":200
}

在您的示例中，您需要访问响应的'rates'属性，并对其进行迭代，然后访问每个货币对的'rate'子属性。

$.each(data.rates, function([currencyPair, rateInfo) { 
    $data.append('<li>price:  '+ rateInfo.rate + '</li>');
});

Answer 3

进行一些更改，您可以删除循环并直接在成功函数中访问数据对象。此外，我们可以使用Template literals

来提高可读性

代码如下：

$(function() {

  var $data = $('#data');

  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
    success: function(data) {
      $data.append(`<li>price:  ${data.rates.EURUSD.rate}</li>`);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="data"></ul>

API数据未显示在页面上

3 个答案: