如何用JavaScript嵌套循环提取CocktailDB返回对象的strIngredient键值对

解法思路 #

• 配料的键名规则固定为strIngredient加1~15的数字，直接按照这个规则遍历即可，还能同时过滤掉无值的空配料字段
• 提取到的配料数组可以直接拼接DOM字符串渲染到页面

推荐写法（规则匹配遍历，性能更好） #

const results = response.drinks;
// 替换为你页面上用来承载渲染结果的容器选择器
const drinkContainer = document.querySelector('#drinkContainer');

results.forEach(drink => {
  // 存储当前饮品的所有非空配料
  const ingredients = [];
  // 遍历1到15的数字，拼接出配料对应的键名
  for (let i = 1; i <= 15; i++) {
    const key = `strIngredient${i}`;
    const val = drink[key];
    // 只保留有实际内容的配料
    if (val?.trim()) {
      ingredients.push(val);
    }
  }
  
  // 渲染到页面示例，可根据自己的需求修改DOM结构
  const drinkCard = `
    <div class="drink-item">
      <h4>${drink.strDrink}</h4>
      <p>配料：${ingredients.join('、')}</p>
    </div>
  `;
  drinkContainer.innerHTML += drinkCard;
})

基于你原有for in逻辑的修改版 #

如果要沿用你现在的遍历逻辑，只需要增加键名匹配判断即可：

var results = response.drinks;
for (var i = 0; i < results.length; i++) {
    var currentDrink = results[i];
    var ingredients = [];
    for (var prop in currentDrink) {
        // 只匹配strIngredient开头且值非空的属性
        if (prop.startsWith('strIngredient') && currentDrink[prop]?.trim()) {
            ingredients.push(currentDrink[prop]);
        }
    }
    // 拿到ingredients数组后自行处理渲染逻辑即可
    console.log('当前饮品配料：', ingredients);
}

内容的提问来源于stack exchange，提问作者woodgrainpants