【JQuery】配列の中のJSONデータを取得する方法
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); } } }); });
コメントを残す