Unexpected <tr> when looping - ruby-on-rails

Question

I have an array of arrays #iterated_orders like this:
[[1, "Don", 3], [nil, nil, 4], [2, "Vri", nil]]
And code in my view like this:
%table
- #iterated_orders.each do |day, day_name, order_id|
- unless day.blank?
%tr
%td.day= day
%td= order_id
I would expect it to output this html:
<tr>
<td class="day">1 Don</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="day">2 Vri</td>
<td></td>
<td></td>
</tr>
But it outputs this HTML:
<tr>
<td class="day">1 Don</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="day">2 Vri</td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
Why is there an extra <tr> and is the <td> with the order_id not added to the existing <tr>?

Answer 1

Your Haml actually renders:
<table>
<tr>
<td class='day'>1</td>
</tr>
<td>3</td>
<td>4</td>
<tr>
<td class='day'>2</td>
</tr>
<td></td>
</table>
When you view it in a browser, the browser will correct this to be valid HTML, including adding extra tr elements, which I suspect is where you are seeing your result (although I get something different in Chrome).
The td with the order_ids are not added to the previous tr because that tr has been closed at that point. Your Haml reads as “unless day is blank, insert a new row containing a cell with the day (and close it), and then insert some table cells with the order_ids”.
The best way to achieve what you are trying to do with Haml is to first get your data into a form that matches your intended output. Being familiar with the Enumerable methods can help here. In particular in this case chunk_while is probably what we want:
#sorted_orders = #iterated_orders.chunk_while {|before, after| after[0].blank? }
Now you can iterate over this structure to produce the HTML:
%table
- #sorted_orders.each do |day|
%tr
-# the first sub-array contains the day:
%td.day #{day[0][0]} #{day[0][1]}
-# then add a td for each order_id (including the first):
- day.each do |d|
%td= d[2]
This produces (with your example data):
<table>
<tr>
<td class='day'>1 Don</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class='day'>2 Vri</td>
<td></td>
</tr>
</table>
which isn’t exactly what your goal is (you have an extra td in the second row). You may have to fix the data a bit more to get equal numbers of elements for each day.