Les données JSON n'apparaissent pas dans la liste déroulante

Question

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

Answer 1

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);
  }
}

    Select your room:
    
        
            Select room