如何在for循环中为javascript创建动态变量以返回json？

Question

我正在调用的 API 有一部分我需要拉取，然后推送到 html 页面。 它们被列为 strIngredient1, strIngredient2, strIngredient3... 直到 15. 我想做的是遍历每个成分？ 我认为我需要某种动态变量。 完全不确定。

 for (var x = 1; x < 16; x++) { if ((drinkResponse.drinks[0].strIngredient + x) !== null) { $("#drinkOutput").append($("<p class='drinkData'>Drink Ingredient" + x + " : " + (drinkResponse.drinks[0].strIngredient + x) + "</p>")) } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

这是我想要做的事情的想法，但目前它返回 NaN； 什么时候应该返回一个字符串。

JSON 返回：

 drinks[0] { dateModified: "2017-09-02 16:38:19" idDrink: "11224" strAlcoholic: "Alcoholic" strCategory: "Ordinary Drink" strCreativeCommonsConfirmed: "No" strDrink: "Casino Royale" strDrinkAlternate: null strDrinkDE: null strDrinkES: null strDrinkFR: null strDrinkThumb: "https://www.thecocktaildb.com/images/media/drink/3qpv121504366699.jpg" strDrinkZH-HANS: null strDrinkZH-HANT: null strGlass: "Whiskey sour glass" strIBA: null strIngredient1: "Gin" strIngredient2: "Lemon juice" strIngredient3: "Maraschino liqueur" strIngredient4: "Orange bitters" strIngredient5: "Egg yolk" strIngredient6: null strIngredient7: null strIngredient8: null strIngredient9: null strIngredient10: null strIngredient11: null strIngredient12: null strIngredient13: null strIngredient14: null strIngredient15: null strInstructions: "In a shaker half-filled with ice cubes, combine all of the ingredients. Shake well. Strain into a sour glass." strInstructionsDE: "In einem Shaker, der halb mit Eiswürfeln gefüllt ist, alle Zutaten vermengen. Gut schütteln. In ein Sour Glas abseihen." strInstructionsES: null strInstructionsFR: null strInstructionsZH-HANS: null strInstructionsZH-HANT: null strMeasure1: "2 oz " strMeasure2: "1/2 oz " strMeasure3: "1 tsp " strMeasure4: "1 dash " strMeasure5: "1 " strMeasure6: null strMeasure7: null strMeasure8: null strMeasure9: null strMeasure10: null strMeasure11: null strMeasure12: null strMeasure13: null strMeasure14: null strMeasure15: null strTags: null strVideo: null }

Answer 1

您正在尝试将x的值附加到变量名称。 你很接近，但你需要使用括号表示法而不是点表示法。

例如，如果x是目前5，即可获得价值strIngredient5与drinkResponse.drinks[0]['strIngredient'+x]或drinkResponse.drinks[0][`strIngredient${x}`] 。

正如 Lain 指出的那样，您还可以使用Object.keys枚举对象上的所有键，然后仅过滤以strIngredient开头的键：

// get all keys on the drink
const allKeys = Object.keys(drinkResponse.drinks[0]);

// now filter for only keys starting with `strIngredient`
const ingredients = allKeys.filter(key => key.startsWith('strIngredient'));

for (const i=0; i<ingredients.length; i++) {
    $("#drinkOutput").append($("<p class='drinkData'>Drink Ingredient" 
    + i + " : " + (drinkResponse.drinks[0][ingredients[i]]) + "</p>"))
}

请注意，这可能不会保留顺序，但您可以通过组合前两个示例来保留顺序：

for (const i=0; i<ingredients.length; i++) {
    $("#drinkOutput").append($("<p class='drinkData'>Drink Ingredient" 
    + i + " : " + (drinkResponse.drinks[0][`strIngredient${i}`]) + "</p>"))
}