Tweet

Pocket

JSONデータの中身が配列で分けており、特定の配列のデータのみを取り出したい場合の方法。
例）id「area」のselectにJSONファイルの配列「category」のデータのみoptionで入れる。

html

<select id="area">
</select>

JSON（data.json）

[
	{
		"category":[
			{
				"area": 0,
				"name": "すべて"
			},{
				"area": 1,
				"name": "北海道・東北"
			}, {
				"area": 2,
				"name": "関東"
			}, {
				"area": 3,
				"name": "東海・北信越"
			}, {
				"area": 4,
				"name": "関西"
			}, {
				"area": 5,
				"name": "中国・四国"
			}, {
				"area": 6,
				"name": "九州・沖縄"
			}
		],

		"subCategory":[
			{
				"name": "北海道",
				"area": 1
			}, {
				"name": "青森県",
				"area": 1
			}, {
				"name": "東京都",
				"area": 2
			}, {
				"name": "神奈川県",
				"area": 2
			}, {
				"name": "愛知県",
				"area": 3
			}, {
				"name": "岐阜県",
				"area": 3
			}, {
				"name": "大阪府",
				"area": 4
			}, {
				"name": "兵庫県",
				"area": 4
			}, {
				"name": "岡山県",
				"area": 5
			}, {
				"name": "広島県",
				"area": 5
			}, {
				"name": "福岡県",
				"area": 6
			}, {
				"name": "佐賀県",
				"area": 6
			}
		]
	}
]

JQuery

$(function() {
	// jsonファイルのパスを「jsonUrl」に入れる
	var jsonUrl = "js/data.json";

	// jsonファイルを読み込んで表示
	$.getJSON(jsonUrl, function(data) {
		
		// 配列「category」のデータをselectに表示
		for(var i in data) {
			for(var j in data[i]["category"]) {
				var appendObj = "<option value=" + data[i]["category"][j].area + ">" + data[i]["category"][j].name + "</option>";
				$("#area").append(appendObj);
			}
  		}
		
	});
});