Question

我是一名JSON菜鸟，试图摆弄这里谈到的世界杯统计数据（http://yhoo.it/ydnworldcup2010）。

下面（我发现的一个演示，只是对getJSON的yQL调用和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>

Answer 1

这样做：

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

示例： http://jsfiddle.net/WWHWw/

您正在寻找的数据在响应中嵌套得更深。

要观察返回的数据，您只需将其记录到浏览器的控制台，然后展开对象即可查看其属性：

console.log( data );

Answer 2

您需要做的第一件事是尝试理解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);
});

注意：在getJSON函数中使用console.log(data)，您将能够在chrome检查器或firebug中看到返回的对象是什么样的，然后您可以正确地解析响应。

JSON到HTML：为什么JSON的值未定义？

2 个答案: