我的代码有一个问题，无法找到一个解决方案来插入食谱的id，我有一个新的请求，以显示食谱的卡路里到HTML中。我想要的只是在API url中添加一个动态id而不是静态的634091 id，因为如果我发送请求并刷新页面，它将不会在HTML中显示卡路里，因为它将是每次刷新生成的另一个id。如果不是很清楚，我可以提供额外的信息，非常感谢您的时间。
js:
setTimeout(function () {
const api_url_calories =
"https://api.spoonacular.com/recipes/634091/nutritionWidget.json";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
data.calories.forEach((obj) => {
/*
create new DOM elements
*/
let div = document.createElement("div");
let calories = document.createElement("p");
div.append(calories);
/*
assign content from api data
*/
calories.innerHTML = obj.calories;
/*
add to DOM
*/
displayRecipes.append(div);
});
// if (response) {
// console.log("data here");
// }
}
getapi(api_url_calories);
}, 100);
HTML:
<body>
<div id="displayRecipes"></div>
</body>
api对卡路里信息的响应如下:
{
"calories": "316",
"carbs": "49g",
"fat": "12g",
"protein": "3g",
"bad": [
{
"name": "Calories",
"amount": "316",
"indented": false,
"percentOfDailyNeeds": 15.84
},
js从食谱请求，其中id来自
const api_url =
"https://api.spoonacular.com/recipes/random?number=3";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
data.recipes.forEach((obj) => {
/*
create new DOM elements
*/
let div = document.createElement("div");
let h1 = document.createElement("h1");
let image = new Image();
let cuisines = document.createElement("p");
let id = document.createElement("p");
div.append(h1);
div.append(image);
div.append(cuisines);
div.append(id);
/*
assign content from api data
*/
h1.innerHTML = obj.title;
image.src = obj.image;
for (let i = 0; i < 100; i++) {
cuisines.innerHTML = obj.cuisines;
}
// cuisines.innerHTML = obj.cuisines[0];
id.innerHTML = obj.id;
/*
add to DOM
*/
displayRecipes.append(div);
});
// if (response) {
// console.log("data here");
// }
}
// Calling that async function
getapi(api_url);
食谱数据的样子，它有一个id键。
"recipes": [
{
"vegetarian": false,
"vegan": false,
"glutenFree": false,
"dairyFree": false,
"veryHealthy": false,
"cheap": false,
"veryPopular": false,
"sustainable": false,
"weightWatcherSmartPoints": 1,
"gaps": "no",
"lowFodmap": false,
"aggregateLikes": 11,
"spoonacularScore": 21.0,
"healthScore": 1.0,
"creditsText": "Foodista.com – The Cooking Encyclopedia Everyone Can Edit",
"license": "CC BY 3.0",
"sourceName": "Foodista",
"pricePerServing": 12.65,
"extendedIngredients": [
{
"id": 1123,
"aisle": "Milk, Eggs, Other Dairy",
"image": "egg.png",
"consistency": "solid",
"name": "eggs",
"nameClean": "egg",
"original": "3 eggs, slightly beaten",
"originalString": "3 eggs, slightly beaten",
"originalName": "eggs, slightly beaten",
"amount": 3.0,
"unit": "",
"meta": [
"slightly beaten"
],
"metaInformation": [
"slightly beaten"
],
"measures": {
"us": {
"amount": 3.0,
"unitShort": "",
"unitLong": ""
},
"metric": {
"amount": 3.0,
"unitShort": "",
"unitLong": ""
}
}
},
您可以通过连接实现:
const recipe_id = "YOUR_DESIRED_ID";
const api_url_calories =
"https://api.spoonacular.com/recipes/" + recipe_id + "/nutritionWidget.json";