How can I generate a table with sections with Jade? - node.js

Question

Thanks in advance for taking the time to try to help. I am using the Jade templating engine in node.js, and want to generate an HTML table with rows grouped into sections (tbody tags).
Let's say I have the following object in memory:
[
{ type: 'Fruit', name: 'Apple' }
, { type: 'Fruit', name: 'Orange' }
, { type: 'Vegetable', name: 'Carrot' }
, { type: 'Vegetable', name: 'Spinach'}
]
(for simplicity, let's assume the array comes pre-ordered by the "type" column).
And I want to generate a table with rows for each object inside a tbody section for each "type" (Fruit vs. Vegetable). So the HTML I'm trying to generate is:
<table>
<thead>
<th>Type</th>
<th>Name</th>
</thead>
<tbody id="Fruit">
<tr>
<td>Fruit</td>
<td>Apple</td>
</tr>
<tr>
<td>Fruit</td>
<td>Orange</td>
</tr>
</tbody>
<tbody id="Vegetable">
<tr>
<td>Vegetable</td>
<td>Carrot</td>
</tr>
<tr>
<td>Vegetable</td>
<td>Spinach</td>
</tr>
</tbody>
</table>
I think I would want my jade to look something like:
table
thead
th Type
th Name
- var lastType;
each o in objs
- if(o.type != lastType)
tbody(id='#{o.type}')
- lastType = o.type;
tr
td #{o.type}
td #{o.name}
But this generates:
<table>
<thead>
<th>Type</th>
<th>Name</th>
</thead>
<tbody id="Fruit" />
<tbody>
<tr>
<td>Fruit</td>
<td>Apple</td>
</tr>
<tr>
<td>Fruit</td>
<td>Orange</td>
</tr>
</tbody>
<tbody id="Vegetable" />
<tbody>
<tr>
<td>Vegetable</td>
<td>Carrot</td>
</tr>
<tr>
<td>Vegetable</td>
<td>Spinach</td>
</tr>
</tbody>
</table>
Any ideas?

Answer 1

This is in Jade kinda hard to guess, because we don't really see how your indentations are really set in your local code, but here(your posted snippet) it seems like your indentations are not right.
You should try this: +Update (added another loop to get all same types under each body)
table
thead
th Type
th Name
- var lastType;
each o in objs
- if (o.type != lastType)
- lastType = o.type;
tbody(id='#{o.type}')
each t in objs
- if(t.type === lastType)
tr
td #{t.type}
td #{t.name}
Just shift the both tr tags into your tbody, like my code example above.
+Update This will produce this HTML code now:
<table>
<thead>
<th>Type</th>
<th>Name</th>
</thead>
<tbody id="Fruit">
<tr>
<td>Fruit </td>
<td>Apple</td>
</tr>
<tr>
<td>Fruit </td>
<td>Orange</td>
</tr>
</tbody>
<tbody id="Vegetable">
<tr>
<td>Vegetable </td>
<td>Carrot</td>
</tr>
<tr>
<td>Vegetable </td>
<td>Spinach</td>
</tr>
</tbody>
</table>

Answer 2

table
thead
th Type
th Name
tbody#Fruit
tbody
tr
td Fruit
td Apple
tr
td Fruit
td Orange
tbody#Vegetable
tbody
tr
td Vegetable
td Carrot
tr
td Vegetable
td Spinach
You should go with pug basic formate to list the following process