如何正确从 JSON API 动态填充 HTML 下拉列表-html教程-PHP中文网

如何正确从 JSON API 动态填充 HTML 下拉列表

本文详解如何从嵌套结构的 json api（如 sheety）正确提取数据并动态生成下拉选项，重点解决因忽略响应对象层级导致选项未渲染的常见问题。

本文详解如何从嵌套结构的 json api（如 sheety）正确提取数据并动态生成下拉选项，重点解决因忽略响应对象层级导致选项未渲染的常见问题。

在 Web 开发中，通过 fetch 从外部 API 加载 JSON 数据并填充

✅ 正确解析嵌套 JSON 结构

Sheety 等低代码 API 平台默认将数据封装在以工作表名为键的对象内（例如 "feuille1"）。因此，必须显式访问该属性才能获取目标数组：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

// ❌ 错误：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';
    }
  }

  // 页面加载完成后执行（确保 DOM 已就绪）
  document.addEventListener('DOMContentLoaded', populateDeviceModels);
</script>

⚠️ 注意事项与最佳实践

始终验证响应结构：不要假设 jsonData 是数组；使用 jsonData?.feuille1?.length > 0 或 Array.isArray(jsonData.feuille1) 进行防御性检查。
处理空值与异常字段：使用 item.modelName || 'N/A' 避免因缺失字段导致 undefined 显示。
添加 DOM 就绪监听：用 DOMContentLoaded 替代立即执行，防止脚本在
错误降级体验：当数据加载失败或结构异常时，提供友好的默认选项（如 "No devices available"），提升用户体验。
调试技巧：在 console.log(data) 后手动展开对象，确认键名是否与代码中引用的一致（Sheety 中工作表名即为顶层键名，区分大小写和空格）。