How to access a single attribute of associated model inside a loop? - ruby-on-rails

Question

I extremely need your assistance. I have many to many :through relationship models: Product, Category and Categorization(as intermediate model). In my view I want to iterate through #products and fetch category's
field "title" on each iteration.
Here's my view:
<div class="col-md-9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<% #products.each do |product| %>
<% product.categories.each do |category| %>
<li class="item-thumbs col-md-4 <%= category.title %> ">
<% end %>
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" >
<span class="overlay-img"></span>
<%= icon 'font-icon-plus' %>
</a>
<!-- Thumb Image and Description -->
<%= image_tag product.product_images, alt: product.description %>
<p><%= product.price %></p>
</li>
<!-- End Item Project -->
<% end %>
</ul>
</section>
</div>
As you see, I need to get category's title on each iteration so as to insert it to li "class" and link each product tab to a menu "li".
The problem is that when I iterate through #categories inside #products loop, it executes just once therefore I don't get category's title for each product.

Answer 1

It looks to me like your loop is repeatedly creating the opening li tag rather than collecting all the category titles like you want, resulting in invalid HTML. Try writing your markup like so instead:
<div class="col-md-9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<% #products.each do |product| %>
<!-- RELEVANT CHANGES RIGHT HERE! -->
<li class="item-thumbs col-md-4 <%= product.categories.pluck(:title).join(' ') %>">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" >
<span class="overlay-img"></span>
<%= icon 'font-icon-plus' %>
</a>
<!-- Thumb Image and Description -->
<%= image_tag product.product_images, alt: product.description %>
<p><%= product.price %></p>
</li>
<!-- End Item Project -->
<% end %>
</ul>
</section>
</div>
</div>
This uses Rails' handy pluck method to grab all the relevant category titles directly from the database, then joins them together with spaces to make a valid class string. Is this the effect you were looking for?