Javascript API数据未显示在页面上

我试图使用API获取货币价格数据，但不知何故，该数据没有显示在页面上。在浏览器中，console可以正常工作

非常感谢您的帮助。谢谢

输出：

价格：未定义

我的代码：

<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>

$（函数（）{
var$data=$（“#data”）；
$.ajax({
键入：“GET”，
数据类型：“json”，
网址：'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
成功：功能（数据）{
控制台日志（数据）；
$。每个（数据、功能（[i、价格）{
$data.append（“
价格：”+price.rate+“
”）；
});
}
});
});

您正在获取的URL不返回数组。响应是一个速率嵌套在第二级的对象

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

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

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

$.each（data.rates，function（[currencyPair，rateInfo）{
$data.append（“
价格：”+rateInfo.rate+”
）；
});

为您提供了一个工作示例，您必须循环得到的JSON的rates标记，而不是像您所做的那样循环根标记。此外，代码中还有一个丢失的“[”

$（函数（）
{
$.ajax({
键入：“GET”，
数据类型：“json”，
网址：'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
成功：功能（数据）
{
控制台日志（数据）；
各美元（数据率、功能（i、价格）
{
$（“#数据”）.append（“
价格：”+price.rate+”
）；
});
}
});
})；

通过一些更改，您可以删除循环并直接在success函数中访问数据对象。此外，我们还可以使用

代码如下：

$（函数（）{
var$data=$（“#data”）；
$.ajax({
键入：“GET”，
数据类型：“json”，
网址：'https://cors.io/?https://www.freeforexapi.com/api/live?pairs=EURUSD',
成功：功能（数据）{
$data.append（`li>价格：${data.rates.EURUSD.rate}`）；
}
});
})；

试试

price.eurud.rate

。或者循环

data.rates

。检查返回的JSON。也许他希望它在“.pairs=euruUSD”未作为参数传递时也能工作，在这种情况下，它可能会返回多个速率（每个“pairs”返回一个速率，不管这意味着什么）@Jordan Burnett谢谢！@Jeto-也有同样的想法，并更新了我的答案。