如何在innerHTML中将fetch-data-In设置为img和div标记

Question

我有一个JavaScript脚本，它获取API数据，如下所示：

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 => {
document.getElementById("ripeCard").innerHTML = `
<div class="card" style="width: 18rem;">
<img src="" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the </p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>`
})
}

API返回数据如下：

calories: 2620.983838835843,
cautions: ["FODMAP"],
cuisineType: ["italian"],
dietLabels: [],
dishType: ["main course"],
healthLabels: ["Vegetarian", "Pescatarian", "Egg-Free", "Peanut-Free", "Tree-Nut-Free", "Soy"],
image: "https://www.edamam.com/web-img/284/2849b3eb3b46aa0e682572d48f86d487.jpg",
ingredientLines: ["500 g bread flour(3 3/4 cups)", "2 1/2 tsp Dry Yeast instant or active (10"], 
label: "Pizza Dough",
mealType: ["lunch/dinner"],
shareAs: "http://www.edamam.com/recipe/pizza-dough-1b6dfeaf0988f96b187c7c9bb69a14fa/pizza",
source: "Lottie + Doof"

如何将这些数据设置到我的引导卡组件中？

Answer 1

使用字符串串联将AJAX请求中对象的值添加到输出的HTML中。由于您已经在使用模板文字，因此语法非常简单：

// mock response object from your AJAX call:
let data = {
calories: 2620.983838835843,
cautions: ["FODMAP"],
cuisineType: ["italian"],
dietLabels: [],
dishType: ["main course"],
healthLabels: ["Vegetarian", "Pescatarian", "Egg-Free", "Peanut-Free", "Tree-Nut-Free", "Soy"],
image: "https://www.edamam.com/web-img/284/2849b3eb3b46aa0e682572d48f86d487.jpg",
ingredientLines: ["500 g bread flour(3 3/4 cups)", "2 1/2 tsp Dry Yeast instant or active (10"],
label: "Pizza Dough",
mealType: ["lunch/dinner"],
shareAs: "http://www.edamam.com/recipe/pizza-dough-1b6dfeaf0988f96b187c7c9bb69a14fa/pizza",
source: "Lottie + Doof"
}
// inside then(data => {..
document.getElementById("ripeCard").innerHTML = `
<div class="card" style="width: 18rem;">
<img src="${data.image}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${data.label}</h5>
<p class="card-text">${data.ingredientLines.join(', ')}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>`;

<div id="ripeCard"></div>