■サンプルソース
<head>
<script type="text/javascript">
var jsonObject = {
"name" : "JustOnePlanet",
"blog" : "WordPress",
"language" : ["JavaScript", "PHP", "Perl"],
"num1" : 10,
"num2" : 5,
"boolean1" : true,
"boolean2" : false
}
function test1(){
if(jsonObject.boolean1){
alert("TEST");
}
}
function test2(){
if(jsonObject.boolean2){
alert("TEST");
}
}
</script>
</head>
<body>
<ul>
<li><a href=”javascript:alert(jsonObject.name);”>alert(jsonObject.name);</a></li>
<li><a href=”javascript:alert(jsonObject.blog);”>alert(jsonObject.blog);</a></li>
</ul>
<ul>
<li><a href=”javascript:alert(jsonObject.language[0]);”>alert(jsonObject.language[0]);</a></li>
<li><a href=”javascript:alert(jsonObject.language[1]);”>alert(jsonObject.language[1]);</a></li>
<li><a href=”javascript:alert(jsonObject.language[2]);”>alert(jsonObject.language[2]);</a></li>
</ul>
<ul>
<li><a href=”javascript:alert(jsonObject.num1);”>alert(jsonObject.num1);</a></li>
<li><a href=”javascript:alert(jsonObject.num2);”>alert(jsonObject.num2);</a></li>
<li><a href=”javascript:alert(jsonObject.num1 + jsonObject.num2);”>alert(jsonObject.num1 + jsonObject.num2);</a></li>
</ul>
<ul>
<li><a href=”javascript:test1();”>if(jsonObject.boolean1){alert(”TEST”);}</a></li>
<li><a href=”javascript:test2();”>if(jsonObject.boolean2){alert(”TEST”);}</a></li>
</ul>
</body>
■サンプルを再現
下記、リンクをクリックするとJSONにおいて指定した要素をアラートして表示します
使用するJSONオブジェクト
var jsonObject = {
"name" : "JustOnePlanet",
"blog" : "WordPress",
"language" : ["JavaScript","PHP","Perl"],
"num1" : 10,
"num2" : 5,
"boolean1" : true,
"boolean2" : false
}
JSONから文字列を取り出そう
- alert(jsonObject.name);//JustOnePlanetと表示されます
- alert(jsonObject.blog);//wordpressと表示されます
JSON内の配列から取り出そう
- alert(jsonObject.language[0]);//JavaScriptと表示されます
- alert(jsonObject.language[1]);//PHPと表示されます
- alert(jsonObject.language[2]);//Perlと表示されます
JSONから数値を取り出そう
- alert(jsonObject.num1);//10と表示されます
- alert(jsonObject.num2);//5と表示されます
- alert(jsonObject.num1 + jsonObject.num2);//15（上記の合計）と表示されます
JSONからブール値を使ってみよう
- if(jsonObject.boolean1){alert(“TEST”);}//条件がTRUEなのでTESTと表示されます
- if(jsonObject.boolean2){alert(“TEST”);}//条件がFALSEなので何も表示されません
■基本文法と解説
使用可能な基本型と利用法
- 使える基本型は文字列、数値、ブール値、nullの4つ
- 文字列はダブルクォーテーション（”）で囲まなければいけない。シングルクォーテーションは文字列を囲む際には使えない
- 数値は10進数表記のみ対応
- 数値の先頭に余分な0は表記できず、無限大infinityや非数NaNも使えない
使用可能な構造型
- 使える構造型はオブジェクト、配列の2つ
- オブジェクトは名前と値のセットの集合体である
- オブジェクトの名前は文字列しか許可されない（ex—“name”:“JustOnePlanet”）
- 値は上記使える基本型の全てが使える
- 名前と値の間は:（コロン）で区切られる
- セット（名前：値）の間は,（カンマ）で区切られる（ex—“name”:”JustOnePlanet”,“blog”,”WordPress”）
- 配列は（ex—“配列名”:[“要素0″,”要素1″,”要素2″,”要素3”]）のように[]でくくり、,（カンマ）で区切る
その他（今回は知らなくても大丈夫ですが）
- MIMEタイプはapplication/json
- ファイル拡張子は.json
- jsonのみで記述（もしくはレスポンス）する際は、下記のように全体を[]でくくる
[
{
"name" : "JustOnePlanet",
"blog" : "WordPress",
"language" : ["JavaScript", "PHP", "Perl"],
"num1" : 10,
"num2" : 5,
"boolean1" : true,
"boolean2" : false
}
]
XMLよりJSONの方が高速でパースできる。
■参考
- こちらも参考にしてみてください。JSON入門へ
ピンバック: JSONにハマる | tanakahiroki