I’m a JSON noob and trying to fiddle around with the open table of World Cup stats talked about here (http://yhoo.it/ydnworldcup2010).
The below (from a demo I found, just with the YQL call for getJSON and the div’s renamed) returns a list of “undefined” ‘s. How can I get it to return the actual data?
<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>
Do this:
Example: http://jsfiddle.net/WWHWw/
The data you’re looking for was nested much deeper in the response.
To observe the data returned, you can simply log it to the browser’s console, and expand the object to see its properties: