如何使用JSON与Fetch/Async Await将数组数据填充到HTML下拉菜单

数据老陈

2026-10-1

问题根因

你的推测完全正确，acessArray函数每次执行都会直接覆盖catList节点的全部HTML内容，循环时每一轮都会清空上一轮生成的下拉选项，最终只会保留最后一次遍历到的猫咪品种。

修复方案

调整逻辑，先拼接完所有下拉选项的HTML内容，再一次性写入DOM节点，避免重复覆盖。修改后的代码如下：

async function start(){
   try{
    const response = await fetch("https://api.thecatapi.com/v1/breeds");
    const data = await response.json();
    console.log(data);
    renderCatSelect(data);
   }catch (e){
    console.log("Error : "+ e);
   }
}
start();

function renderCatSelect(catBreeds){
    // 先拼接默认选项
    let optionsHTML = `<option value="Choose a cat">Choose a cat</option>`;
    // 遍历所有品种，拼接所有option
    catBreeds.forEach(breed => {
        optionsHTML += `<option value="${breed.id}">${breed.name}</option>`;
    });
    // 一次性写入完整的select结构
    document.getElementById("catList").innerHTML = `
    <select>
        ${optionsHTML}
    </select>
    `;
}