J'ai écrit un site Web permettant aux utilisateurs de changer les mots de passe wifi.
Les données sont stockées dans data/data.json. Cela inclut le numéro de chambre, le nom du point d'accès et le mot de passe.
[
{"Room": "room 1", "AP name": "ap 1", "password": "12345678"},
{"Room": "room 2", "AP name": "ap 2", "password": "12345678"}
]
Il existe un menu déroulant permettant aux utilisateurs de sélectionner leur chambre. Les options déroulantes sont générées par JavaScript en obtenant les données d'un fichier JSON. Mais maintenant, aucune option n’apparaît dans la liste déroulante.
<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);
});
}
Puis-je savoir quelle partie est incorrecte et comment y remédier ? Merci
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Franchement, votre code est assez déroutant. Par exemple : Vous êtes
DOMContentLoaded注册了两次事件监听器（在代码的顶部和底部），它们都执行loadRoomNumbers.Laissez-moi réécrire correctement votre méthode
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); } }Ou dans un exemple concret :
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); } }