WEBOPIXEL

jQueryでjsonデータを扱ってみる【入門編】

Posted: 2010.07.25 / Category: javascript / Tag: ,

javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。
似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。
そこで入門編と題して(入門編しかない!)改めて基礎から勉強していけたらと思います。

Sponsored Link

とにかくシンプルなjson

jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。
「:(コロン)」で区切ったキーと値を一組として、2組目を「,(コンマ)」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱います。
値には文字列、数値以外にも真偽値、配列、オブジェクトなどが入れられます。
まあ、この辺は言葉より実際見る方がわかりやすいっすね。
例えば「山田さん、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を指定して、第2引数に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>
	

COMMENTS

ikaring 2011-05-24 23:36 

非常に分かりやすかったのですぐ使えそうです。
ありがとうございます。

mishizuka 2016-04-23 18:46 

こちらのページの最初の部分でミスが、あります。sonの前にJが、抜けてる様です。

javascriptで外部のWebサービスを利用するデータ形式はsonを使うことが基本なようです。

webOpixel 2016-04-26 13:03 

mishizukaさん
ご指摘ありがとうございました。修正しました。

田舎モノ 2017-12-27 01:11 

とても丁寧に説明されていて助かります。
jsをある程度使っている人には大した問題では無いですが、一応getJSON関数はjqueryが必要なので、そのために読み込む必要があることは明記した方が良いと思います。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。