とにかくシンプルなjson
jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。
「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。
それらを{}で囲むことで一つのオブジェクトとして扱います。
値には文字列、数値以外にも真偽値、配列、オブジェクトなどが入れられます。
まあ、この辺は言葉より実際見る方がわかりやすいっすね。
例えば「山田さん、21才」というデータは下記になります。
var data = {
"name": "山田",
"age": 21
}
dataという変数に「山田」という値を持つ「name」キーと、「21」という値を持つ「age」キーが1組が入っているわけですね。
では、次にこのjsonデータを表示してみましょう。
取り出し方は変数名「.（ドット）」のあとにキー名を続けて書くだけです。
この場合dataという変数宣言をしましたので「data.name」で「山田太郎」が抜き出せます。
とりあえずアラートで表示してみます。
alert('name:' + data.name + ' age:' + data.age);
2組以上のオブジェクトを持つjsonデータ
「山田さん、21才」というデータを表示できたわけですが、一人のデータしかたなったらjsonな意味がないのでどんどん追加していきましょう。
「佐藤さん、56才」「鈴木さん、33才」を追加していきます。
var data = [
{ "name": "山田", "age": 21 },
{ "name": "佐藤", "age": 56 },
{ "name": "鈴木", "age": 33 }
]
{}を一人として「,」で区切って追加していきます。
複数人になるわけですから配列として扱うことになります。全体を[]で囲んであげましょう。
ちなみに「,（コンマ）」のあとは最初のように改行しても、しなくても大丈夫です。
オブジェクトを取り出す場合for/in文を使うと簡単なようです。
あと、いつまでもアラートじゃ芸がないので、リストで表示してみます。
htmlの適当な場所にulをid=outputでマークアップしてliで追加していきます。
html
<ul id="output"></ul>
JavaScript
for(var i in data){
$("#output").append("<li>" + data[i].name + "（" + data[i].age + "才）</li>");
}
子要素を持つjsonデータ
山田さんとか渡辺さんとか2、3人ならいいですが、20人とか30人になったとき「どこの山田だよ！」ってなりそうですね。
そんなことで困ったとき「営業部の山田さん」とか言えたら便利な気がします。
ということで今回は営業部というグループに山田さんたちを入れて扱うようにしたいと思います。
データ構造は「division」「person」というキー名を並列に付けて、「division」に「営業部」という値を入れ、「person」には前回作った山田さん、佐藤さん、鈴木さんを配列として入れてやりましょう。
var data =
[{
"division": "営業部",
"person": [
{ "name": '山田', "age": 21 },
{ "name": '佐藤', "age": 56 },
{ "name": '鈴木', "age": 33 }
]
},
{
"division": "製造部",
"person": [
{ "name": '阿部', "age": 44 },
{ "name": '藤沢', "age": 19 },
{ "name": '渡辺', "age": 26 }
]
}];
営業部だけでは寂しいので製造部も作ってみました。
で、次は例のごとく取り出して表示します。
これまでは1階層の構造だったので変数.キー名（data.name）で取り出してましたが、2階層の場合はさらに「.」で区切ってキー名を書いていきます。
例えば上記のデータで製造部の藤沢さんを取り出したい場合「data[1].person[1].name」となります。
また全て抜き出すにはループも2回させる必要がありそうです。
for(var i in data){
$("#output").append("<li><strong>" + data[i].division + "</strong></li>");
for(var j in data[i].person){
$("#output").append("<li>" + data[i].person[j].name + "（" + data[i].person[j].age + "才）</li>n");
}
}
jsonデータを外部ファイルで読み込む
最後に今まで内部で書いていたjsonのデータを外部ファイルとして読み込んでみましょう。
var dataの変数の中をそのままdata.jsonという名前で保存します。
data.json
[{
"division": "営業部",
"person": [
{ "name": "山田", "age": 21 },
{ "name": "佐藤", "age": 56 },
{ "name": "鈴木", "age": 33 }
]
},
{
"division": "製造部",
"person": [
{ "name": "阿部", "age": 44 },
{ "name": "藤沢", "age": 19 },
{ "name": "渡辺", "age": 26 }
]
}]
getJSON関数を使えば簡単にjsonデータを読み込んで使用することができます。
第一引数にjsonファイルのURLを指定して、第２引数にfunction(変数名)と書けば、jsonのデータをそのまま変数の中に入れることができます。
jsonデータは前回と同じなので、表示は同じように書いていくだけですね。
javascript
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("data.json", function(data){
for(var i in data){
$("#output").append("<li><strong>" + data[i].division + "</strong></li>");
for(var j in data[i].person){
$("#output").append("<li>" + data[i].person[j].name + "（" + data[i].person[j].age + "才）</li>n");
}
}
});
});
</script>
