Как я могу получить значения JSON и отображать в HTML - PullRequest
Новая
       15

Как я могу получить значения JSON и отображать в HTML

1 голос
/ 02 марта 2011

Я убивал себя из-за этого в течение некоторого времени. Я пытаюсь использовать 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. Мне бы хотелось, чтобы он прочитал 5000 долларов. Есть ли хороший момент, на который вы можете указать мне?

1 Ответ

2 голосов
/ 02 марта 2011

Вы смешиваете в себе доступ DOM и JSON cbfunc.Предполагая, что вам нужно это 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
...