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