本文详解如何从嵌套结构的 json api（如 sheety）正确提取数据并动态生成下拉选项，重点解决因忽略响应对象层级导致选项未渲染的常见问题。
本文详解如何从嵌套结构的 json api（如 sheety）正确提取数据并动态生成下拉选项，重点解决因忽略响应对象层级导致选项未渲染的常见问题。
在 Web 开发中，通过 fetch 从外部 API 加载 JSON 数据并填充 <select> 下拉列表是一项基础但易出错的操作。你遇到的“控制台显示数据成功获取，但下拉框为空”问题，根本原因在于 JSON 响应结构与代码预期不匹配——你的 API 返回的是一个包含嵌套数组的对象（如 { "feuille1": [...] }），而代码却直接对整个响应对象调用了 .forEach()，导致遍历失败。
✅ 正确解析嵌套 JSON 结构
Sheety 等低代码 API 平台默认将数据封装在以工作表名为键的对象内（例如 "feuille1"）。因此，必须显式访问该属性才能获取目标数组：
// ❌ 错误：jsonData 是对象，不是数组，无法直接 forEach
jsonData.forEach(item => { ... });
// ✅ 正确：先定位到实际数据数组
jsonData.feuille1.forEach(item => { ... });✅ 完整可运行示例代码
<div>
<label for="deviceModel">Device:</label>
<select id="deviceModel"></select>
</div>
<script>
async function fetchData() {
try {
const response = await fetch('https://api.sheety.co/45256646ee76deaa20e88c36a827fcc6/cms/feuille1');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log('JSON data successfully fetched:', data);
return data;
} catch (error) {
console.error('Failed to fetch device data:', error);
return null;
}
}
async function populateDeviceModels() {
const selectElement = document.getElementById('deviceModel');
const jsonData = await fetchData();
// ✅ 关键：校验嵌套结构 + 类型安全
if (jsonData && jsonData.feuille1 && Array.isArray(jsonData.feuille1)) {
jsonData.feuille1.forEach(item => {
const option = document.createElement('option');
option.value = item.modelName || '';
option.textContent = item.modelName || 'Unknown';
selectElement.appendChild(option);
});
} else {
console.warn('Expected "feuille1" array not found in response. Check API structure.');
selectElement.innerHTML = '<option value="">No devices available</option>';
}
}
// 页面加载完成后执行（确保 DOM 已就绪）
document.addEventListener('DOMContentLoaded', populateDeviceModels);
</script>⚠️ 注意事项与最佳实践
- 始终验证响应结构：不要假设 jsonData 是数组；使用 jsonData?.feuille1?.length > 0 或 Array.isArray(jsonData.feuille1) 进行防御性检查。
- 处理空值与异常字段：使用 item.modelName || 'N/A' 避免因缺失字段导致 undefined 显示。
- 添加 DOM 就绪监听：用 DOMContentLoaded 替代立即执行，防止脚本在 <select> 元素尚未加载时运行。
- 错误降级体验：当数据加载失败或结构异常时，提供友好的默认选项（如 "No devices available"），提升用户体验。
- 调试技巧：在 console.log(data) 后手动展开对象，确认键名是否与代码中引用的一致（Sheety 中工作表名即为顶层键名，区分大小写和空格）。
掌握这一模式后，你可轻松适配任意类似嵌套结构的 RESTful API（如 Airtable、Google Sheets API 等），让动态表单开发更稳健、可维护。
