循环浏览项目并放入正确的列表中

Question

我有一个产品列表，其中包含两列：Name和Category。

如何在@products中循环浏览每个产品并将它们放在具有相同product.category的列表组中？

当前代码：

这会为每个产品创建一个新的list-group。我想将具有相同类别的产品组合在一起。

<% @products.each do |product| %>
    <div class="col-md-6 column_container">    
      <div class="list-group">
        <a class="list-group-item list-group-item-success active">
          <%= product.category %>
        </a>
        <a href="#" class="list-group-item">
          <%= product.name %>
        </a>
      </div>
    </div>
<% end %>

例如：

<div class="container">
  <div class="row">
    <div class="col-md-6 column_container">    
      <div class="list-group">
        <a class="list-group-item list-group-item-success active">
          Category Name                                 <---- category
        </a>
        <a href="#" class="list-group-item">
          Product1 Name                                 <---- has same category
        </a>
        <a href="#" class="list-group-item">
          Product1 Name                                 <---- has same category
        </a>
      </div>
    </div>

    <div class="col-md-6 column_container">    
      <div class="list-group">
        <a class="list-group-item list-group-item-success active">
          Category Name                                 <---- category
        </a>
        <a href="#" class="list-group-item">
          Product1 Name                                 <---- has same category
        </a>
        <a href="#" class="list-group-item">
          Product1 Name                                 <---- has same category
        </a>
      </div>
    </div>
  </div>
</div>

我应该使用两个循环吗？一个循环遍历每个类别，然后是另一个嵌套循环来放置每个产品？

Answer 1

您可以使用group_by方法：

<% @products.group_by(&:category).each do |category, products| %>
  # do something with category

  <% products.each do |product| %>
    # do something with each product
  <% end %>
<% end %>

您想按字母顺序对不同的类别进行排序吗？好！

<% @products.group_by(&:category).sort_by{ |category, products| category.to_s }.each do |category, products| %>
  # ...
<% end %>