通过数组映射但无法正确渲染

Question

下面的代码显示JSON数据，但未按应有的方式显示它。我希望将结果res.recipe.ingredient显示在从1开始到循环结束的有序列表中，但是数据将所有输出呈现为数字1，并以逗号分隔。我正在使用纯JavaScript。

function showRecipe(food) {

    let output = '';

    let show = food.hits.forEach(function (res) {

      output += `
      <div class="card card-body">
        <div class="row">
          <div class="col-md-12">
            <h3>${res.recipe.label}</h3>
            <a href="#" target="_blank" class="btn btn-block mb-4"> View Profile </a>
            <img class="img-fluid mb-2" src="${res.recipe.image}">
           <h4>${res.recipe.calories}</h4>
           <h3>Ingredient:</h3>
           <ul class="list-group">
           <li>${res.recipe.ingredients.map(text => text.text)} 
           </li>
           </ul>
         </div>
        </div> 
      </div>
        ` 
    });  
    this.recipes.innerHTML = output;
}

Answer 1

进行以下更改，我们在数组中的每个元素上添加一个li标签，然后使用join方法将其转换回字符串。

来自：

   <ul class="list-group">
       <li>${res.recipe.ingredients.map(text => text.text)} 
       </li>
   </ul>

收件人：

   <ul class="list-group">
       ${res.recipe.ingredients.map(text => `<li>${text.text}</li>`).join('')} 
   </ul>