JavaScript jQueryでAjaxを使いJSONファイルから一連のデータを設定する方法 (select, ul)

2020/05/01

今回は Ajax を使い JSON ファイルから配列データを取得し select などに設定する例を示します。
今回の例は都道府県のコードと名称を読込んで select に設定することを行います。

先ずは以下の様な都道府県のコードと名称のリストである JSON ファイルを用意します。

[
  {"id":"01", "name":"北海道"},
  {"id":"02", "name":"青森県"},
  {"id":"03", "name":"岩手県"},
  {"id":"04", "name":"宮城県"},
  {"id":"05", "name":"秋田県"},
  {"id":"06", "name":"山形県"},
  {"id":"07", "name":"福島県"},
  {"id":"08", "name":"茨城県"},
  {"id":"09", "name":"栃木県"},
  {"id":"10", "name":"群馬県"},
  {"id":"11", "name":"埼玉県"},
  {"id":"12", "name":"千葉県"},
  {"id":"13", "name":"東京都"},
  {"id":"14", "name":"神奈川県"},
  {"id":"15", "name":"新潟県"},
  {"id":"16", "name":"富山県"},
  {"id":"17", "name":"石川県"},
  {"id":"18", "name":"福井県"},
  {"id":"19", "name":"山梨県"},
  {"id":"20", "name":"長野県"},
  {"id":"21", "name":"岐阜県"},
  {"id":"22", "name":"静岡県"},
  {"id":"23", "name":"愛知県"},
  {"id":"24", "name":"三重県"},
  {"id":"25", "name":"滋賀県"},
  {"id":"26", "name":"京都府"},
  {"id":"27", "name":"大阪府"},
  {"id":"28", "name":"兵庫県"},
  {"id":"29", "name":"奈良県"},
  {"id":"30", "name":"和歌山県"},
  {"id":"31", "name":"鳥取県"},
  {"id":"32", "name":"島根県"},
  {"id":"33", "name":"岡山県"},
  {"id":"34", "name":"広島県"},
  {"id":"35", "name":"山口県"},
  {"id":"36", "name":"徳島県"},
  {"id":"37", "name":"香川県"},
  {"id":"38", "name":"愛媛県"},
  {"id":"39", "name":"高知県"},
  {"id":"40", "name":"福岡県"},
  {"id":"41", "name":"佐賀県"},
  {"id":"42", "name":"長崎県"},
  {"id":"43", "name":"熊本県"},
  {"id":"44", "name":"大分県"},
  {"id":"45", "name":"宮崎県"},
  {"id":"46", "name":"鹿児島県"},
  {"id":"47", "name":"沖縄県"}
]

HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、引数には JSON データの配列が返りますのでそれを option 句のリストとして整形してやり select の子要素に追加します。

■Ajaxを使いJSONファイルからデータを取得

<html>
<head>
<meta charset="utf-8">
<title>test ajax json file</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <h2>test ajax json file</h2>
  都道府県：
  <select name="SelectPref" id="SelectPref">
    <option value=""></option>
  </select>
  <button onclick="getPrefData();">Ajax</button>

<script type="text/javascript">
function getPrefData() {
    $.ajax({
        type: "GET",
        url: "pref.json",
        dataType: "json",
        cache: false,
        success: function(PrefData) {
            // select の内容削除
            $("#SelectPref").empty();
            var append = '<option value=""></option>&#10;';
            // JSON データを option に展開生成
            for(var i = 0; i < PrefData.length; i++) {
                append += '<option value="' + PrefData[i].id + '" >';
                append += PrefData[i].name;
                append += '</option>';
                append += '&#10;';
            }
/*          forループを以下の様にしてもOK
            $.each(PrefData, function(i) {
                append += '";
                append += PrefData[i].name;
                append += '';
                append += '&#10;";
            });
*/
            // select の内容に設定
            $("#SelectPref").append(append);
        }
    });
    return false;
}
</script>
</body>
</html>

簡単なマスタデータを JSON ファイルにまとめて上記の様に取得すれば、区分データぐらいであれば特にデータベースを使わないでもいけると思います。

JavaScript
0CM

コメントを書く