javascript - 尝试循环访问对象中名为 strIngredients 1-15 的项目

Question

    event.preventDefault();

    $('#mainContent').empty();

    $.ajax({
        url: randomDrinksURL,
        method: 'GET'
    }).then(function (response) {
        console.log(response);
        var mainContent = $('#mainContent');
        mainContent.append(`
        <img src='${response.drinks[0].strDrinkThumb}'>
        <p>${response.drinks[0].strDrink}</p>
        <p>${response.drinks[0].strMeasure1} of ${response.drinks[0].strIngredient1}</p>
        <p> ${response.drinks[0].strInstructions}</p>
        `);
    });

该对象列出了从 1 到 15 的所有成分和测量值，我正在尝试找到一种方法来遍历它们，而不必单独编写每个成分，但它还需要能够知道何时停止(如果值是) = 空

我尝试了某种 for 循环，但无法让它发挥作用来挽救我的生命。任何帮助都会很棒!

Answer 1

像这样的事情可以做到吗？

let html = `
        <img src='${response.drinks[0].strDrinkThumb}'>
        <p>${response.drinks[0].strDrink}</p>
        `

for (var i = 1; i<= 15; i++) {
  let ingredient= "strIngredient" + i;
  let measure= "strMeasure" + i;
  if (response.drinks[0][measure] && response.drinks[0][ingredient]) {
    html += `<p>${response.drinks[0][measure]} of ${response.drinks[0][ingredient]}</p>`
  }
}

html += `<p> ${response.drinks[0].strInstructions}</p>`

mainContent.append(html)

已编辑添加了空条件