JSON数据没有在下拉列表中显示

Question

我写了一个网站让用户修改他们的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);
});
}

我可以知道哪个部分是错误的，如何修复它吗?由于

Answer 1

坦率地说，您的代码相当混乱。例如:您为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);
}
}

<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>