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

    Select your room:
    
        
            Select room