已成功获取JSON数据但无法填充HTML下拉列表的问题排查

核心错误原因 #

从你提供的控制台数据可知，接口返回的是一个包含feuille1数组的对象，但你的代码直接对整个返回对象调用forEach方法——对象本身没有forEach方法，导致遍历逻辑完全没有执行，下拉列表自然不会生成任何选项。

具体修复步骤 #

1. 修正数据遍历层级 #

在populateDeviceModels函数中，需要先访问返回对象里的feuille1数组，再执行遍历：

// 原错误代码
jsonData.forEach(item => { ... })

// 修复后代码
jsonData.feuille1.forEach(item => { ... })

2. 可选：修复label与select的关联问题 #

HTML里label的for属性是devicemodel（全小写），而select的id是deviceModel（驼峰式），虽然不影响下拉填充，但会导致点击label时无法聚焦到下拉框，建议统一：

<!-- 原代码 -->
<label for="devicemodel">Device :</label>

<!-- 修复后代码 -->
<label for="deviceModel">Device :</label>

完整修复后的脚本代码 #

// Function to fetch data from sheety
async function fetchData() {
  try {
    const response = await fetch('https://api.sheety.co/45256646ee76deaa20e88c36a827fcc6/cms/feuille1');
    const data = await response.json();
    console.log('JSON data successfully fetched :', data);
    return data;
  } catch (error) {
    console.error('Error when trying to fetch :', error);
  }
}

// Function to populate dropdown list with device models
async function populateDeviceModels() {
  const selectElement = document.getElementById('deviceModel');
  
  // Get data from Sheety
  const jsonData = await fetchData();

  // Check if data and feuille1 array exist
  if (jsonData && jsonData.feuille1) {
    // Traverse the feuille1 array instead of the entire object
    jsonData.feuille1.forEach(item => {
      const option = document.createElement('option');
      option.value = item.modelName;
      option.text = item.modelName;
      selectElement.appendChild(option);
    });
  }
}

// Call function to populate dropdown list at page loading
populateDeviceModels();

额外建议 #

• 可以在控制台打印typeof jsonData和jsonData.feuille1，确认数据结构是否符合预期
• 增加数组存在性判断（如jsonData?.feuille1），避免因接口结构变化导致的报错

内容的提问来源于stack exchange，提问作者Jack Rogers