如何将fetch获取的API数据填充至innerHTML的img、div及Bootstrap卡片组件

前置说明的核心坑点 #

Edamam search接口返回的顶层结构和你贴的示例数据结构不一致：你给出的calories/label/image等字段，实际都在返回结果的hits数组每一项的recipe子属性下，顶层返回结构大致为：

{
  q: "你的搜索关键词",
  hits: [
    { recipe: { /* 所有食谱字段都在这里 */ } }
  ]
}

渲染前必须先从data.hits中提取对应的食谱对象，否则会取不到字段值。

可直接替换的修正代码 #

async function sendApiRequest() {
    let APP_ID = "f61bb958";
    let APP_Key = "7c465e19d8e2cb3bc8f79e7a6e18961e"
    let INPUT_VALUE = document.getElementById("inputRecipe").value;
    console.log(INPUT_VALUE)
      
    fetch(`https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_Key}&q=${INPUT_VALUE}`)
        .then(response => response.json())
        .then(data => {
            const cardContainer = document.getElementById("ripeCard");
            // 兜底：无搜索结果时的提示
            if (data.hits.length === 0) {
                cardContainer.innerHTML = `<p class="text-muted">未找到相关食谱，请更换关键词重试</p>`;
                return;
            }
            // 提取第一个命中的食谱数据
            const targetRecipe = data.hits[0].recipe;

            cardContainer.innerHTML = `
                <div class="card" style="width: 18rem;">
                    <img src="${targetRecipe.image}" class="card-img-top" alt="${targetRecipe.label}">
                    <div class="card-body">
                        <h5 class="card-title">${targetRecipe.label}</h5>
                        <p class="card-text">
                            总热量：${Math.round(targetRecipe.calories)} 千卡<br>
                            菜系：${targetRecipe.cuisineType.join('、')}<br>
                            部分配料：${targetRecipe.ingredientLines.slice(0,2).join('、')}...
                        </p>
                        <a href="${targetRecipe.shareAs}" class="btn btn-primary" target="_blank">查看完整食谱</a>
                    </div>
                </div>`
        })
}

字段对应规则 #

• 图片src绑定targetRecipe.image，alt绑定食谱名，提升可访问性
• 卡片标题绑定label字段（食谱名称）
• 卡片正文可自由拼接需要展示的字段，比如健康标签、饮食限制、用餐场景等
• 跳转按钮href绑定shareAs字段，添加target="_blank"可避免跳转时离开当前页面

如果需要渲染多条搜索结果，遍历data.hits数组，循环生成对应数量的卡片插入容器即可。

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