JSONデータをjQueryで読み取るのは簡単です。
JSONデータを読み込む前に、jQueryで配列データを表示するJavaScriptをみてみましょう。jquery-1.8.3.min.js が必要です。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JSON 01</title>
<script src="./jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<div id="output"></div>
<script type='text/javascript'>
var data =
[{
"lang": "Java",
"url": [
{ "no": 1, "value": "http://java.com/en/" },
{ "no": 2, "value": "http://openjdk.java.net/" },
{ "no": 3, "value": "http://www.java.net/" }
]
},{
"lang": "Ruby",
"url": [
{ "no": 1, "value": "http://www.ruby-lang.org/ja/" },
{ "no": 2, "value": "https://github.com/ruby-no-kai/official/wiki" },
{ "no": 3, "value": "http://jruby.org/" }
]
}];
for(var i in data){
$("#output").append("<li><strong>" + data[i].lang + "</strong></li>");
for(var j in data[i].url){
$("#output").append("<li>" + data[i].url[j].no + ":" + data[i].url[j].value + "</li>\n");
}
}
</script>
</body>
</html>
これをもとに、JSONデータをsample_json02_data.jsonへ移動して、$.getJSON()関数を使うと、次のようになります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JSON 01</title>
<script src="./jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<div id="output"></div>
<script type='text/javascript'>
$(document).ready(function () {
$.getJSON("sample_json02_data.json", function(data){
for(var i in data){
$("#output").append("<li><strong>" + data[i].lang + "</strong></li>");
for(var j in data[i].url){
$("#output").append("<li>" + data[i].url[j].no + ":" + data[i].url[j].value + "</li>\n");
}
}
});
});
</script>
</body>
</html>
ちなみに、sample_json02_data.json は次の通り。
[{
"lang": "Java",
"url": [
{ "no": 1, "value": "http://java.com/en/" },
{ "no": 2, "value": "http://openjdk.java.net/" },
{ "no": 3, "value": "http://www.java.net/" }
]
},{
"lang": "Ruby",
"url": [
{ "no": 1, "value": "http://www.ruby-lang.org/ja/" },
{ "no": 2, "value": "https://github.com/ruby-no-kai/official/wiki" },
{ "no": 3, "value": "http://jruby.org/" }
]
}]
JavaScriptについては、下記の書籍の参考になるでしょう。
- JavaScriptプログラミング入門 第2版
- JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで
- JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技
プログラミング言語一般については、下記が参考になるでしょう。
- クラスベースのオブジェクト指向プログラミング言語の基礎を学ぶには … 改訂版 基礎Java(CD-ROM付) (IMPRESS KISO SERIES)
- クラスベースのオブジェクト指向プログラミング言語を学ぶには … プログラミング言語Java (The Java Series)
- 関数型プログラミング言語を学ぶには … Scalaスケーラブルプログラミング第2版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)