javascript - API数据未显示在页面上

Question

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

非常感谢任何帮助。谢谢!

输出:

price: undefined

我的代码:

<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 的 rates 标签，而不是像您所做的那样循环根标签。另外，您的代码中丢失了“[”。

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