JSONからHTML：なぜJSONの値は未定義ですか？

私はJSON noobで、ここで話し合っているワールドカップの統計情報（http://yhoo.it/ydnworldcup2010）のオープンテーブルを試してみようとしています。JSONからHTML：なぜJSONの値は未定義ですか？

以下は（私が見つけたデモから、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>

出典

2011-02-01 nathanbweb

getJSONで呼び出すHTTPリクエストがJSONではなく、JavaScript（関数呼び出し）を返すかどうか不明です。ああ、JSONPです。クール、ちょうど新しいものを学んだ。 –

@Martinho：JSONPです。意図したとおりに動作しています。 – SLaks

@SLaks、ええ、[jQuery.getJSON]（http://api.jquery.com/jQuery.getJSON/）のドキュメントのクイックチェックは、[JSONP]（http：// en .wikipedia.org/wiki/JSONP）。 –

この操作を行います。

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

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

あなたが反応してより深い入れ子になった探していたデータを。

console.log(data);

出典

2011-02-01 16:40:57 user113716

素晴らしい。 Firebugのコンソールから実行するのではなく、ページの読み込み時にブラウザにデータを取得させるにはどうすればよいですか？ – nathanbweb

@nathanbweb：私はちょうどあなたがデータを観察するためにコンソールを使用できることを意味しました。あなたのコードに必要な唯一の変更は、私の答えの最初の行です。 '$（document）.ready'の中で実行しているので、ページが読み込まれたときに実行されます。だから '$ .each（data、func ...'を '$ .each（data.query.results.row、func ...'。 – user113716

...と置き換えたのは、単にjsFiddleというサイトそれはコンソールではありません。 – user113716

あなたがする必要がある最初の事はのレイアウトを試してみて、理解している：データが返され、あなたは、単にブラウザのコンソールにそれを記録し、そのプロパティを参照するオブジェクトを展開することができます観察する

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)を使用し、あなたの、あなたは、あなたが適切に応答を解析することができ、返されたオブジェクトがどのように見えるかクロムインスペクタや放火魔に確認することができます。

出典

2011-02-01 16:46:35 Lance

JSONからHTML：なぜJSONの値は未定義ですか？

答えて

関連する問題