How can I fetch json values and display in html

Question

I have been killing myself over this for some time. I am looking to use the causes API to fetch some data from some of our causes we have active and display that via html.

I have created a facebook app and i'm trying to use jquery ajax. This is what I have:

<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');
        });
    }
  });
});

Problem is that I am not getting anything to display. Is this a crossdomain issue or is there something I missed.

Thanks!

Updated code:

<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>');
        });
    }
  });
});

One last question to ask:

If I wanted to format one of the returning values as currency.

In my updated code I get a return of 5000 I would like it to read $5,000. Is there a good tut you can point me to?

Answer 1

You are mixing DOM and JSON access in you cbfunc. Assuming, that you want that total-raised number for each of the elements returned by that query, you can simple request JSON (as you do) and iterate over it accordingly.

    $.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>');
            });
        }
    });

Here's the code I used for debugging: https://gist.github.com/850148. For reference, here's a sketch of the response:

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