對飲料 api 執行 ajax 呼叫，我嵌套了一個回圈來提取成分并將它們呈現到頁面上。嵌套回圈正確控制成分，但是當我使用 jquery 將結果附加到頁面時，只顯示最后一個索引中的專案。我知道有空值，我打算在讓它們顯示后用 if 陳述句洗掉它們。
功能 displayDrinkData(drinkName) {
var queryURL = "https://thecocktaildb.com/api/json/v1/1/search.php?s=" drinkName
$.ajax({
url: queryURL,
method: "GET"
}).then(function (response) {
console.log(response);
var results = response.drinks;
for (var i = 0; i < results.length; i ) {
console.log(results[i]);
var eachDrink = results[i];
var drinkDiv = $("<div>");
var drinkName = results[i].strDrink;
for (var k = 1; k < 16; k ) {
console.log(eachDrink['strIngredient' k]);
var ingList = $("<ul>").text("Ingredients: " eachDrink['strIngredient' k])
}
var pOne = $("<p>").text("Drink name: " drinkName);
var drinkInstructions = results[i].strInstructions;
var pTwo = $("<p>").text("Instructions: " drinkInstructions);
var drinkImage = $("<img>");
drinkImage.attr("src", results[i].strDrinkThumb);
drinkDiv.append(pOne);
drinkDiv.append(ingList);
drinkDiv.append(pTwo);
drinkDiv.append(drinkImage);
$("#drinks-view").append(drinkDiv);
}
})
}
uj5u.com熱心網友回復：
因為var ingList是在回圈內，不是追加，而是每次都創建一個新的。
var ingList = $("<ul>");
for (var k = 1; k < 16; k ) {
console.log(eachDrink['strIngredient' k]);
ingList.append($('<li>').text("Ingredients: " eachDrink['strIngredient' k]));
}
在回圈外宣告變數，并<li>為每個元素追加。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336571.html
標籤：javascript 查询