本文详解如何通过 javascript 的 `fetch()` 正确读取本地 json 文件并动态生成 `
在构建基于静态文件的轻量级管理界面（如 Wi-Fi 密码更新页）时，常需从本地 JSON 文件（如 data/data.json）动态加载选项到
✅ 正确实现：使用 async/await + 单次 DOM 加载监听
原始代码存在多个隐患：
- 重复注册 DOMContentLoaded 监听器（可能导致函数执行多次或冲突）；
- .then().then().catch() 链中未正确处理 Promise 拒绝（如网络失败、JSON 解析错误）；
- fetch() 返回的 Response 对象需显式调用 .json() 才能解析为 JS 对象，且该方法本身也返回 Promise——必须 await 或链式 .then()，否则 roomsData 将是未解析的 Promise 实例，导致 forEach 报错（TypeError: roomsData.forEach is not a function）。
以下是修复后的推荐写法（简洁、健壮、可维护）：
Select your room:
// ✅ 推荐：使用 async/await + 单次事件监听
document.addEventListener('DOMContentLoaded', loadRoomNumbers);
async function loadRoomNumbers() {
const roomSelect = document.getElementById('room');
try {
const response = await fetch('data/data.json');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const roomsData = await response.json(); // ✅ 关键：await 确保解析完成
// 清空默认提示项以外的选项（可选，提升容错性）
roomSelect.innerHTML = '';
roomsData.forEach(roomData => {
const option = document.createElement('option');
option.value = roomData.Room;
option.textContent = roomData.Room;
roomSelect.appendChild(option);
});
} catch (error) {
console.error('❌ Failed to load room data:', error.message);
// 可选：向用户展示友好提示
roomSelect.innerHTML = '';
}
}⚠️ 注意事项与调试建议
- 路径验证：确保 data/data.json 路径正确（区分大小写，检查服务器是否允许跨源或直接访问 .json 文件）。可在浏览器开发者工具的 Network 标签中查看请求是否返回 200 OK 及响应体是否为合法 JSON。
- CORS 限制：若直接双击 HTML 文件打开（file:// 协议），现代浏览器会因安全策略阻止 fetch() 读取本地文件。务必通过本地服务器运行（如 VS Code 的 Live Server 插件、npx serve 或 Python 的 python -m http.server）。
- JSON 格式校验：确认 data.json 是严格有效的 JSON（字段名需双引号包裹，无尾逗号，无注释）。
- DOM 元素存在性：getElementById('room') 返回 null 时说明元素未加载或 ID 不匹配，请检查 HTML 是否已渲染且 ID 拼写一致。
✅ 总结
下拉菜单无选项的核心原因通常是：JSON 数据未成功解析为数组，或解析后未正确遍历注入 DOM。通过统一使用 async/await、添加完整的错误处理、避免重复监听，并配合本地 HTTP 服务调试，即可稳定实现 JSON 驱动的动态表单选项。此模式同样适用于加载设备列表、楼层信息、用户配置等场景。
