如何获取 json 值并在 html 中显示

Question

一段时间以来，我一直为此自杀。我希望使用 Causes API 从我们已激活的一些原因中获取一些数据，并通过 html 显示这些数据。

我创建了一个 facebook 应用程序，我正在尝试使用 jquery ajax。这就是我所拥有的：

<script type="text/javascript">
$(document).ready(function()
{
  $.ajax({
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fapi.causes.com%2Fbeneficiaries%2F1239.xml'&format=json&callback=cbfunc",
    dataType: "json",
    success: function(cbfunc) {
        $(cbfunc).find('count').each(function(){
            var total = $(this).find('total-raised').text();
            $(this).html('<p>'+total+'</p>').appendTo('#listTotalDollor');
        });
    }
  });
});

问题是我没有显示任何内容。这是跨域问题还是我错过了什么。

谢谢！

更新的代码：

<script type="text/javascript">
$(document).ready(function()
{
  $.ajax({
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fapi.causes.com%2Fbeneficiaries%2F1239.json%22&format=json",
    dataType: "json",
    success: function(data) {
        $.each(data.query.results, function(i, key) {
            var total = key['total_raised'];
            $("#listTotalDollar").html('<span>' + total + '</span>');
        });
    }
  });
});

最后一个问题：

如果我想将返回值之一格式化为货币。

在我更新的代码中，我得到的回报为 5000，我希望它读取为 5,000 美元。有什么好的图可以指点我吗？

Answer 1

您在 cbfunc 中混合了 DOM 和 JSON 访问。假设您想要该查询返回的每个元素的 total-raised 数字，您可以简单地请求 JSON（就像您所做的那样）并相应地对其进行迭代。

    $.ajax({
        // !wrapped only for readability!
        url: "http://query.yahooapis.com/v1/public/yql?
                  q=select%20*%20from%20xml%20where%20url%3D'\
                  http%3A%2F%2Fapi.causes.com%2Fbeneficiaries%2F1239.xml'\
                  &format=json",

        dataType: "json",
        success: function(data) {
            // `data` is actually a json structure (as requested)
            // if you want to see it as a whole, just use 
            // console.log(data);

            // now iterate over the json structure 
            // (see also: http://stackoverflow.com/q/1078118/89391)
            // and set your target dom element as you like 
            // (this is just a dummy ...)
            $.each(data.query.results, function(i, key) {
                var total = key['total-raised'].content;
                $("target").html('<p>' + total + '</p>');
            });
        }
    });

这是我用于调试的代码：https://gist.github.com/850148。
作为参考，以下是响应的草图：

Object
    query: Object
        count: 1
        created: "2011-03-01T23:24:18Z"
        lang: "en-US"
        results: Object
            beneficiary: Object
                id: Object
                name: "INTERNATIONAL FELLOWSHIP OF CHRISTIANS & JEWS"
                recent-facebook-donors: "time1297716630facebook_id0nameRobert \
            Alan Schoonoveramount200time1297372019facebook_id0nameCurtis En…"
                total-causes: Object
                total-donors: Object
                total-members: Object
                total-raised: Object
            __proto__: Object
        __proto__: Object
    __proto__: Object
__proto__: Object