jqueryを使ってjsonを読み込むサンプル

jqueryを使ってjsonを読み込むサンプルです。
階層深い場合も参考になるかと思います。

test.json

{
"test": "中間テスト",
"date": "2012/7/10",
"data": [{
"name": "neko",
"class": "A",
"score": [
{ "japanese": 100,
"math": 50,
"english": 80
}
]
},
{
"name": "hana",
"class": "B",
"score": [
{ "japanese": 60,
"math": 90,
"english": 20
}
]
}]
}

test.js

$(function() {
var url = 'test.json';
window.onload = function(){
fncJson();
}
function fncJson (){
var htmlData = "";
$.getJSON(url, function(json){
htmlData += "</p>
<h1>" + json.test + "</h1>
<p>" + json.date + "</p>
<p>";
for(var i in json.data){
htmlData +=  "</p>
<p>" + json.data[i].name + json.data[i].class + "</p>
<p>";
for(var j in json.data[i].score){
htmlData +=  "</p>
<p>国語：" + json.data[i].score[j].japanese + "</p>
<p>" +
"</p>
<p>数学：" + json.data[i].score[j].math + "</p>
<p>" +
"</p>
<p>英語：" + json.data[i].score[j].english + "</p>
<p>";
}
}
$("#jsTest").append(htmlData);
});
}
});

index.html

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="test.js"></script></p>
<div id="jsTest">
</div>
<p>