Data JSON tidak muncul dalam senarai lungsur turun

Question

Saya menulis laman web untuk pengguna menukar kata laluan wifi.

Data disimpan dalam data/data.json. Ini termasuk nombor bilik, nama AP dan kata laluan.

[
  {"Room": "room 1", "AP name": "ap 1", "password": "12345678"},
  {"Room": "room 2", "AP name": "ap 2", "password": "12345678"}
]

Terdapat menu lungsur untuk pengguna memilih bilik mereka. Pilihan lungsur turun dijana oleh JavaScript dengan mendapatkan data daripada fail JSON. Tetapi kini tiada pilihan ditunjukkan dalam senarai juntai bawah.

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

Boleh saya tahu bahagian mana yang tidak betul dan bagaimana untuk membetulkannya? Terima kasih

Answer 1

Terus terang, kod anda agak mengelirukan. Contohnya: Anda adalah DOMContentLoaded 注册了两次事件监听器（在代码的顶部和底部），它们都执行 loadRoomNumbers.

Izinkan saya menulis semula kaedah loadRoomNumbers anda dengan betul:

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

Atau dalam contoh yang berfungsi:

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