I have a MongoDB database and I want to import with forEach 3 arrays. This is a recipe and I want to looks like first column the quantity next to a new column the unit and next to the ingredients, each one is imported from a database Array list.

Here is my code:

<div class="row pt-4">
    <div class="col-12">
        <h4>Ingredients</h4>
        <ul class="list-group">
        <% recipe.quantity.forEach(function(quantity, index){ %>
            <li class="list-group-item"><%= quantity %></li>
        <% }) %>

        <% recipe.unit.forEach(function(unit, index){ %>
            <li class="list-group-item"><%= unit %></li>
        <% }) %>

        <% recipe.ingredients.forEach(function(ingredients, index){ %>
            <li class="list-group-item"><%= ingredients %></li>
        <% }) %>
        </ul>
    </div>
</div>

CodePudding user response：

Try for example:

1. Wrap row in a container. It's important because row has negative margins.
2. Divide output into 3 lists - by one list per a column.
3. Show headers before their lists.
4. Show all lists under each other on mobile: use col-md class or another one.

<div class="container">
    <div class="row pt-4">
        <div class="col-md">
            <h4>Quantity</h4>
            <ul class="list-group">
                <% recipe.quantity.forEach(function(quantity, index){ %>
                <li class="list-group-item"><%= quantity %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Unit</h4>
            <ul class="list-group">
                <% recipe.unit.forEach(function(unit, index){ %>
                <li class="list-group-item"><%= unit %></li>
                <% }) %>
            </ul>
        </div>
        <div class="col-md">
            <h4>Ingredients</h4>
            <ul class="list-group">
                <% recipe.ingredients.forEach(function(ingredients, index){ %>
                <li class="list-group-item"><%= ingredients %></li>
                <% }) %>
            </ul>
        </div>
    </div>
</div>