Как сделать динамическую переменную c в для l oop для javascript для возврата json?

Question

У API, который я вызываю, есть раздел Ingredients, который мне нужно вытащить, а затем pu sh на страницу html. Они перечислены как strIngredient1, strIngredient2, strIngredient3 ... До 15. Что я хочу сделать, это l oop через каждый ингредиент? Мне нужна какая-то динамическая переменная c, я думаю. Совершенно не уверен.

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 return:

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}`].

Как указывал Лейн, вы также можете использовать 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>"))
}