JSON初心者がJSONに触ってみる

■サンプルソース

<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入門へ

TrackBack URL :

Comments (1)

@blog.justoneplanet.info

JSON初心者がJSONに触ってみる

■サンプルソース

■サンプルを再現

使用するJSONオブジェクト

JSONから文字列を取り出そう

JSON内の配列から取り出そう

JSONから数値を取り出そう

JSONからブール値を使ってみよう

■基本文法と解説

使用可能な基本型と利用法

使用可能な構造型

その他（今回は知らなくても大丈夫ですが）

■参考

1件のコメント»

Leave a comment