Nodejs EJS中的循环

Question

我有一个带有引导程序的nodejs应用程序。引导卡应连续放置3个，列中放置的数据个数最多。我尝试了两个for循环，但是数据在每一行中都在重复。我无法弄清楚该如何实现。

我的EJS代码是

<% for(var i=0; i<details.length; i++) { %>
          <div class="row">
            <% for(var j=0; j<3; j++) { %>
              <div class="col-sm">
                <div class="card border-danger mb-3" style="max-width: 20rem;">
                    <div class="card-body">
                      <h4 class="card-title"><%= details[i].name %></h4>
                        <p class="card-text">Location : <%= details[i].location %><br>
                          City: <%= details[i].city %><br>
                          Available: <%= details[i].available %><br>
                          Phone No: <%= details[i].phone %></p>
                    </div>
                </div>
              </div>
            <% } %>
          </div>
        <% } %>

仅用于表示，我希望卡片以这种方式显示我的数据：

Answer 1

您仅使用两个计数器，但实际上需要三个。 i计数器用于行，j计数器用于列，因此将k设置为details的索引。

您可以在外部for中进行设置，然后用details引用k，并在每个内部k循环的最后一个引用中递增for：

// outer for
for (var i=0, k = 0; i<details.length; i++)

// ....

<div class="card-body">
 <h4 class="card-title"><%= details[k].name %></h4>
    <p class="card-text">Location : <%= details[k].location %><br>
      City: <%= details[k].city %><br>
      Available: <%= details[k].available %><br>
      Phone No: <%= details[k++].phone %>
    </p>
</div>