■サンプルソース
<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