JSON в HTML: почему значения для JSON не определены? - PullRequest
Новая
       9

JSON в HTML: почему значения для JSON не определены?

0 голосов
/ 01 февраля 2011

Я новичок в JSON и пытаюсь возиться с открытой таблицей статистики Кубка мира, о которой говорилось здесь (http://yhoo.it/ydnworldcup2010).

Ниже (из демонстрации, которую я нашел, только с вызовом YQL дляgetJSON и div переименовывается) возвращает список "неопределенных". Как я могу получить его для возврата фактических данных? 

<html>
<head>
<title>World Cup JSON attempt</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
$("document").ready(function () {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D%22http://spreadsheets.google.com/pub%3Fkey%3D0AhphLklK1Ve4dEdrWC1YcjVKN0ZRbTlHQUhaWXBKdGc%26single%3Dtrue%26gid%3D1%26x%3D1%26output%3Dcsv%22%20and%20columns%3D%22surname,team,position,time,shots,passes,tackles,saves%22&format=json&diagnostics=true&callback=?', function (data) {
        $("#content").html('');
        $.each(data, function (i, item) {
        $("#content").append('<div class="results"><div class="surname">' + item.surname + '</div><div class="team">' + item.team + '</div><div class="position">' + item.position + '</div><div class="time">' + item.time + '</div><div class="shots">' + item.shots + '</div><div class="passes">' + item.passes + '</div><div class="tackles">' + item.tackles + '</div><div class="saves">' + item.saves + '</div><div class="clear"></div></div>');
});
    });
    $("#content").fadeIn(2000);
});
</script>
</head>
<body>
<div class="main">
<h4>Results:</h4>
<div id="content"><img src="images/ajax-loader.gif" alt="Loading..." /></div>
</div>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 01 февраля 2011

Сделайте это: 

$.each(data.query.results.row, function (i, item) {

Пример: http://jsfiddle.net/WWHWw/

Данные, которые вы искали, были вложены гораздо глубже в ответ.

Чтобы наблюдать за возвращенными данными, вы можете просто зарегистрировать их в консоли браузера и развернуть объект, чтобы увидеть его свойства: 

console.log( data );
0 голосов
/ 01 февраля 2011

Первое, что вам нужно сделать, это попытаться понять структуру ответа JSON.Ответ представляет собой «многоуровневый» ответ json, означающий, что у вас есть вложенные данные, которые вы пытаетесь проанализировать.Я настроил ваш скрипт, и вот работающий пример для jsfiddle . 

$("document").ready(function () {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D%22http://spreadsheets.google.com/pub%3Fkey%3D0AhphLklK1Ve4dEdrWC1YcjVKN0ZRbTlHQUhaWXBKdGc%26single%3Dtrue%26gid%3D1%26x%3D1%26output%3Dcsv%22%20and%20columns%3D%22surname,team,position,time,shots,passes,tackles,saves%22&format=json&diagnostics=true&callback=?', function (data) {

    $("#content").html('');
    $.each(data.query.results.row, function (i, item) {
    $("#content").append('<div class="results"><div class="surname">' + item.surname + '</div><div class="team">' + item.team + '</div><div class="position">' + item.position + '</div><div class="time">' + item.time + '</div><div class="shots">' + item.shots + '</div><div class="passes">' + item.passes + '</div><div class="tackles">' + item.tackles + '</div><div class="saves">' + item.saves + '</div><div class="clear"></div></div>');
        });
    });
    $("#content").fadeIn(2000);
});

Примечание: если вы используете console.log(data) внутри функции getJSON, вы сможете увидетьВ Chrome Inspector или Firebug, как выглядит возвращаемый объект, вы можете правильно проанализировать ответ.

...