我写了一个网站供用户更改 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); } }