@blog.justoneplanet.info

日々勉強

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から文字列を取り出そう
JSON内の配列から取り出そう
JSONから数値を取り出そう
JSONからブール値を使ってみよう

■基本文法と解説

使用可能な基本型と利用法
  • 使える基本型は文字列数値ブール値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入門

1件のコメント»

[…] 初心者のためのJSONによると、数字とBOOL型はダブルクオートで囲んじゃダメのようですね。これも注意ですね。 カテゴリー: 未分類   作成者: torikasyu パーマリンク […]

RSS feed for comments on this post.TrackBack URL

Leave a comment