我寫了一個網站供使用者更改 wifi 密碼。
資料儲存在data/data.json中。這包括房間號碼、AP 名稱和密碼。
[
{"Room": "room 1", "AP name": "ap 1", "password": "12345678"},
{"Room": "room 2", "AP name": "ap 2", "password": "12345678"}
]
有一個下拉式選單供使用者選擇他們的房間。下拉選項由 JavaScript 透過從 JSON 檔案取得資料來產生。但現在下拉清單中沒有顯示任何選項。
<tr>
<td>Select your room:</td>
<td>
<select id="room" name="room" required>
<option value="" selected>Select room</option>
<!-- Room options will be populated by JavaScript -->
</select>
</td>
</tr>
document.addEventListener('DOMContentLoaded', loadRoomNumbers);
// Function to load room numbers from data.json
function loadRoomNumbers() {
const roomSelect = document.getElementById('room');
fetch('data/data.json')
.then(response => {
if (!response.ok) {
throw new Error('Could not load data.json');
}
return response.json();
})
.then(roomsData => {
roomsData.forEach(roomData => {
const option = document.createElement('option');
option.value = roomData.Room;
option.textContent = roomData.Room;
roomSelect.appendChild(option);
});
})
.catch(error => {
console.error('Error fetching room data:', error);
});
}
我可以知道哪個部分不正確以及如何修復它嗎？謝謝
坦白說，你的程式碼相當混亂。 例如：您為
DOMContentLoaded註冊了兩次事件監聽器（在程式碼的頂部和底部），它們都執行loadRoomNumbers。讓我正確重寫您的
loadRoomNumbers方法：document.addEventListener('DOMContentLoaded', loadRoomNumbers); // Function to load room numbers from data.json async function loadRoomNumbers() { const roomSelect = document.getElementById('room'); try { const response = await fetch('data/data.json') if (!response.ok) { throw `Response not ok (${response.status})` } const rooms = await response.json() rooms.forEach(roomData => { const option = document.createElement('option'); option.value = roomData.Room; option.textContent = roomData.Room; roomSelect.appendChild(option); }); } catch (error) { console.error('Error fetching room data:', error); } }或在一個工作範例中：
document.addEventListener('DOMContentLoaded', loadRoomNumbers); // Function to load room numbers from data.json async function loadRoomNumbers() { const roomSelect = document.getElementById('room'); try { // This has to be replaced by fetch('data/data.json') of course const rooms = await [ {"Room": "room 1","AP name": "ap 1","password": "12345678"}, {"Room": "room 2","AP name": "ap 2","password": "12345678"} ] rooms.forEach(roomData => { const option = document.createElement('option'); option.value = roomData.Room; option.textContent = roomData.Room; roomSelect.appendChild(option); }); } catch (error) { console.error('Error fetching room data:', error); } }