How to use loops to create multiple tables from data query - ruby-on-rails

Question

I have posts split into alphabetical groups like this.
A
B
C
E
Each letter needs 1 table.
Each row has 2 columns title and tags.
How do i add the table to the loop correctly so each letter has 1 table?
<table style=" width:100%; table-layout:fixed " >
</table>
index.html.erb
<% cur_letter = nil %>
<% #posts.each do |t| %>
<% title_letter = t.title[0].capitalize.match(/[A-Z]/) ? t.title[0].capitalize : "#" %>
<% if title_letter != cur_letter %>
<% cur_letter = title_letter %>
<%= cur_letter %>
<% end %>
<tr>
<td style="width:50%"><%= t.title %></td>
<td style="width:50%"><%= t.tags %></td>
</tr>
<% end %>

Answer 1

edit: I changed #post to #posts where stylistically appropriate
Rather than doing lots of gymnastics in your view, you could assemble the data how you want it before you pass it to the view:
#posts = Post.all.group_by {|post| post.title.downcase[0]}
# => {"a" => [<post....#array of post beginning with "A"], "b" => [post... #and so on... ]}
This will create a hash with a key representing each first letter with the value being all the Post objects whose title starts with that letter. Now with that passed to the view you could then iterate over them in a couple of ways.
In the interest of someone finding this later and running into the very real possibility that the field they are grouping by has a null value somewhere, I'll add this to cover all cases including nil values:
#posts = Post.all.group_by do |post|
if post.title == nil
post.title = ' '
end
post.title.downcase[0]
end
Now on to the view...
If you want just the letters that exist, i.e. if you don't have any posts that begin their title with "X", then you can just iterate through the keys
<% #posts.keys.sort.each do |key| %> #this is where the sorting a-z happens
<h2><%= key.upcase %></h2><br>
<table style=" width:100%; table-layout:fixed " >
<% #posts[key].each do |post| %>
<tr>
<td> <%= post.title %> </td>
<td> <%= post.tags %> </td>
</tr>
<% end %>
</table>
<% end %>
I've left out the styling details of your table as that is up to you.
If you want every letter listed, even if there are no Post titles beginning with that letter you can just do:
<% (('0'..'9').to_a + ('a'..'z').to_a).each do |letter| %>
#this generates ['0','1','2'....'z']
<h2><%= letter.upcase %></h2><br>
<table style=" width:100%; table-layout:fixed " >
<% #posts[letter].each do |post| %>
<tr>
<td> <%= post.title %> </td>
<td> <%= post.tags %> </td>
</tr>
<% end %>
</table>
<% end %>
This would give you:
A
A post beginning with "a" | some tags
Another post starting with "a" | some tags
B
C
D
Decidedly starts with "d" | some tags
Dis post starts with "d" ;-) | some tags
E
etc...
The problem with this style is that if you have any posts that start with a non-letter/non-number character, you won't see them unless you include all of those characters in your outer loop array. That is why I would do it the first way, as that represents the data that exists rather than guessing what data might exist.

Answer 2

I'm assuming your posts are already ordered alphabetically. You'll want to:
Open the first table.
Every time you hit a new letter, close the existing table and open a new one.
At the end, close the last table.
Code will look something like this:
<% cur_letter = nil %>
<table style=" width:100%; table-layout:fixed " >
<% #posts.each do |t| %>
<% title_letter = t.title[0].capitalize.match(/[A-Z]/) ? t.title[0].capitalize : "#" %>
<% if title_letter != cur_letter %>
<% cur_letter = title_letter %>
<%= cur_letter %>
<!-- You're switching letters here, so close the current table and start a new one. -->
</table>
<table style=" width:100%; table-layout:fixed " >
<% end %>
<tr>
<td style="width:50%"><%= t.title %></td>
<td style="width:50%"><%= t.tags %></td>
</tr>
<% end %>
</table>