さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】配列の中のJSONデータを取得する方法

Pocket
LINEで送る

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);
			}
  		}
		
	});
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容