今回は、HTMLとJavaScriptを使って、外部のJSONファイルからプルダウンメニューの項目を動的に表示する方法をご紹介します。JSONファイルを使うことで、簡単に外部データを取り込み、動的にプルダウンの内容を管理することができます。
このプロジェクトでは、以下の3つのファイルを作成します。
1. HTMLファイル（index.html） – プルダウンメニューのベースとなるHTML
2. JSONファイル（data.json） – プルダウンメニューの項目を格納するデータ
3. JavaScriptファイル（script.js） – JSONデータを読み込み、HTMLに反映させるスクリプト
1. JSONファイル（data.json）
まず、プルダウンメニューに表示するデータをJSON形式で用意します。今回は、シンプルなオプションを用意します。
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4"
]
}このデータは後ほどJavaScriptで読み込み、プルダウンメニューの項目として動的に追加されます。
2. HTMLファイル（index.html）
次に、HTMLファイルを作成します。<select>タグを用意して、JavaScriptでJSONから読み込んだオプションをここに挿入します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プルダウンの項目をJSONから表示</title>
</head>
<body>
<h1>プルダウンメニュー</h1>
<select id="dropdown">
<!-- オプションはJavaScriptで追加されます -->
</select>
<script src="script.js"></script>
</body>
</html>3. JavaScriptファイル（script.js）
続いて、JavaScriptでJSONファイルを読み込み、プルダウンメニューに項目を動的に追加するコードを実装します。
// JSONファイルを読み込む関数
function loadOptions() {
// data.json から JSON データをフェッチ
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // JSON を JavaScript オブジェクトに変換
})
.then(data => {
const dropdown = document.getElementById('dropdown');
// JSONデータのオプションをプルダウンに追加
data.options.forEach(option => {
const optionElement = document.createElement('option');
optionElement.textContent = option;
optionElement.value = option;
dropdown.appendChild(optionElement);
});
})
.catch(error => {
console.error('Error fetching the JSON data:', error);
});
}
// ページが読み込まれたらオプションを表示
window.onload = loadOptions;このスクリプトでは、fetch() APIを使ってJSONファイルを読み込み、そのデータをHTMLの<select>タグ内に動的に追加しています。window.onloadイベントを使って、ページが読み込まれたときにプルダウンメニューが生成されるようにしています。
4. ファイル構成
以下のようにファイルを配置してください。
/project
├── index.html
├── script.js
└── data.json動作確認
1. 上記の3つのファイルをそれぞれ作成します。
2. ブラウザでindex.htmlを開きます。JSONファイルからデータが読み込まれ、プルダウンメニューにオプションが表示されることを確認できます。
まとめ
このように、JSONファイルからデータを読み込み、HTMLのプルダウンメニューに動的に表示することができます。外部データを簡単に管理したい場合や、頻繁に変更されるデータを扱う場合に非常に便利です。ぜひプロジェクトに取り入れてみてください！
以上の内容をブログに投稿することで、外部JSONファイルを使用してプルダウンメニューを動的に表示する方法を読者に伝えることができます。