CODEWITHSUNDEEP
jqueryjsonyql
nathanbweb
nathanbweb

Reputation: 717

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>

Upvotes: 0

Views: 1615

Answers (2)

Lance
Lance

Reputation: 1897

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.

Upvotes: 0

user113716
user113716

Reputation: 322492

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 );

Upvotes: 3

Related Questions