とにかくシンプルな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>