jQueryでAJAX入門2回目：JSON形式を扱う
前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく，JSON（ジェイソン）と呼ばれる形式を扱い，同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も，前回紹介のXML形式同様jQueryで取得・表示をさせることができます
JSON？
JSONはJavaScript Object Notationの略で，JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。
JSONサンプル
[
{
"name": "技評太郎",
"age" : 26,
"skills":["PHP" , "JavaScript"]
},
{
"name": "長谷川広武",
"age":25,
"skills":["HTML" , "CSS"]
},
{
"name": "徳田和規",
"age":26,
"skills":["JavaScript" , "jQuery"]
}
]- オブジェクトは{}で全体を囲む
- キーと値のペアはコロン（:）で区切る
- 複数指定はカンマ（,）で区切る
- キーには文字列のみ使用可能
JSONの例
JavaScriptのオブジェクトと配列の構造と同じですが，例を見てみましょう。
オブジェクト例
オブジェクト例
{
"name" : "長谷川広武" ,
"age" : 25
}配列の例
配列の例
["JavaScript" , "jQuery" , "HTML" , "CSS"]それでは早速先ほどのサンプルを表示させる簡単なサンプルを見てみましょう。
JSONをリストで表示させるサンプル
JSONは先ほどJSONサンプルを利用して，その中身をリストに入れて表示してみることにします。
$.getJSON()メソッド
JSON形式を取得する場合は，前回でも利用した$.ajax()メソッド利用でも実現可能なのですが，JSONでは，専用に$.getJSON()メソッドが用意されています。
$.getJSON("js/sample01.json",function(data){
// ここに実行したい処理を書く
});$.ajax()メソッドを使うよりも手続きが簡単です。
早速サンプルを見てみましょう。
jQuery(function(){
$.getJSON("js/sample01.json",function(data){
$('p','#demo').remove();
$('#demo').append('<ul/>');
$.each(data,function(i,items){
$("<li/>",{
text:'名前：'+items.name+' 年齢：'+items.age+' スキル：'+items.skills.join(',')
}).appendTo('ul','#demo');
});
});
});
前回のXMLのサンプル時には，コード内でloading中の表示をさせましたが，今回はHTML側にloading中の画像をいれておき，$.getJSON()メソッドの最初で，その画像部分を.remove()メソッドで削除しています。その後，リストを表示させるためのUL要素を追加し，itemsごとにLI要素に入れてUL要素へ追加していくようにしました。
items中の複数の中身を一つのリスト中に入れてしまっているのですが，今回のサンプル用に簡易的に表示させたものです。
スキルだけ「.join(',')」を使っているのですが，これはスキルの項目のみ配列で複数中身があるので，それを一度に表示させるために中身を.join(',')で結合させているためです。
$.getJSON()を使わない場合
JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので，$.getJSON()で利用せずとも，データの形によっては，HTMLのSctiptタグで読み込み利用する方法もあります。下記のように，変数として指定しておきます。
JSONサンプル
//変数とする
var jsonData = [
{
"name": "技評太郎",
"age" : 26,
"skills":["PHP" , "JavaScript"]
},
{
"name": "長谷川広武",
"age":25,
"skills":["HTML" , "CSS"]
},
{
"name": "徳田和規",
"age":26,
"skills":["JavaScript" , "jQuery"]
}
] 上記のデータをScriptで読み込みます
<script type="text/javascript" src="js/sample02.json"></script>これでデータを扱う準備ができたので，あとは通常通りコードで扱うだけです。
jQuery(function(){
$('p','#demo').remove();
$('#demo').append('<ul/>');
$.each(jsonData,function(i,items){
$("<li/>",{
text:'名前：'+items.name+' 年齢：'+items.age+' スキル：'+items.skills.join(',')
}).appendTo('ul','#demo');
if ( i == 4 ) return false;
});
});この方法だと，$.getJSON()や$.ajax()を使わずとも表示が可能です。
