Question

say I’m looping through an array of products, how would I go about assigning a container div within that loop. For instance I want output like so:

<div class="page">
  <p>product1</p>
  <p>product2</p>
  <p>product3</p>
  <p>product4</p>
</div>
<div class="page">
  <p>product5</p>
  <p>product6</p>
  <p>product7</p>
  <p>product8</p>
</div>

I tried something like this:

<% @products.each_with_index do |product, index| %>
  <% if index%4 == 0 %>
    <div class="page">
  <%end%>
  <p><%= product.data %>
  <% if index%4 == 0 %>
    </div>>
  <%end%>
<% end %>

But as expected it will only surround every 4th product with the container. I’m thinking that I’m going to need two loops in order for this to work, but how can I do this without duplicating data?

Edit

When using alternatives to each_with_index is there any way to keep a track of the index using this method? There are also some conditional attributes that get set based on the index value.

For example:

style=<%= index == 0 ? "top:5px;" : ""%>

Answer 1

The Rails method to split an array into groups of equal size is ary.in_groups_of(number)

<% @products.in_groups_of(4, false) do |group| %>
  <div class="page">
    <% group.each do |product| %>
      <p><% product.data %></p>
    <% end %>
  </div>
<% end %>

Much nicer in Haml 🙂

- @products.in_groups_of(4, false) do |group|
  .page
    - group.each do |product|
      %p= product.data

You can get the absolute product index with @products.index(product) or the group index with

<% @products.in_groups_of(4, false).each_with_index do |group, group_index| %>