L oop in Nodejs EJS - PullRequest
Новая
       9

L oop in Nodejs EJS

0 голосов
/ 02 апреля 2020

У меня есть приложение nodejs с bootstrap. Карты bootstrap должны быть размещены как 3 подряд и столько же, сколько данных в столбце. Я пробовал это с двумя циклами for, но данные повторяются в каждой строке. Я не могу понять, как это сделать.

Мой код E JS равен 

<% 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>
        <% } %>

Просто для представления, я хочу, чтобы карточки отображали мои данные таким образом : enter image description here

1 Ответ

2 голосов
/ 02 апреля 2020

Похоже, что вы можете уйти с одним л oop. Чтобы получить правильную строку logi c, просто поставьте галочку на счетчике l oop i, чтобы увидеть, есть ли у вас индекс 0, 3, 6 и т. Д. c, а затем, если это так, вы можете произвести строка. 

<% for(var i = 0; i < details.length; i++) { %>
  <% if (i === 0 || i % 3 === 0) { %>
    <div class="row">
  <% } %>
    <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>
  <% if (i === 0 || i % 3 === 0) { %>
    </div>
  <% } %>
<% } %>
...