JSON to HTML: why are values for JSON undefined?
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:
$.each(data.query.results.row, function (i, item) {
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:
console.log( data );
The first thing you need to do is try and understand the layout of the JSON response. The response is a "layered" json reply, meaning you have nested data you're attempting to parse through. I've adjusted your script, and here's a running example on 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);
});
Note: of you use console.log(data) inside your getJSON function, you'll be able to see in chrome inspector or firebug what the returned object looks like, then you can properly parse the response.
加载中,请稍侯......
精彩评论