如何在Bootstrap中将MongoDB数组渲染为数量单位食材三列食谱列表？

你当前的写法是分别遍历三个数组，会先输出全部数量、再输出全部单位、最后输出全部食材，无法做到同一配料的三个字段在同一行展示。由于三个数组的下标是一一对应的（同一下标对应同一条配料的三个属性），只需遍历一次数组，通过下标同步读取另外两个数组的对应值即可实现三列布局，修改后的代码如下：

<div class="row pt-4">
    <div class="col-12">
        <h4>Ingredients</h4>
        <ul class="list-group">
            <!-- 仅遍历一次数量数组，通过index同步获取对应单位和食材 -->
            <% recipe.quantity.forEach(function(quantity, index){ %>
            <li class="list-group-item row">
                <!-- 三列布局可自行调整col后的数字修改宽度占比 -->
                <div class="col-4"><%= quantity %></div>
                <div class="col-4"><%= recipe.unit[index] %></div>
                <div class="col-4"><%= recipe.ingredients[index] %></div>
            </li>
            <% }) %>
        </ul>
    </div>
</div>

注意事项 #

• 需保证recipe.quantity、recipe.unit、recipe.ingredients三个数组的长度完全一致，否则会出现取值为undefined的异常
• 如果需要兼容数组长度不一致的场景，可以在取值时增加默认值，示例如下：

  <%= recipe.unit[index] ?? '' %>
  <%= recipe.ingredients[index] ?? '' %>
  

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