How to insert new tr every third iteration in Jade

Question

I'm new in node.js and Jade.

I searched for solutions without success (maybe I asked wrong questions in google, I don't know).

I want to create table rows in each loop in Jade. The thing is that after every 3rd td I want insert new tr. Normally it's quite simple but with Jade I simply can't achieve that.

My Jade file:

table
    thead
        tr
            td Header
    tbody
        each item, i in items
            if (i % 3 === 0)
            tr
                td
                    a(href="#{baseUrl}/admin.html?id=#{item.id}")

I know that something is wrong with my if statement. I tried many configurations without luck. I'm sure that it will be quite easy issue.

Thanks in advance for help!

EDIT

Based on @Laurent Perrin answer I modified a little my code. Now it creates tr, then 3 td and then new tr so it's a little closer...

New Jade

if (i % 3 === 0)
   tr
td: a(href="#{baseUrl}/admin.html?id=#{item.id}") dsdsd #{i}

Generated HTML

<tr></tr>
<td><a href="...">0</a></td>
<td><a href="...">1</a></td>
<td><a href="...">2</a></td>
<tr></tr>

Answer 1

EDIT: this code should do what you want, but it's not very elegant:

table
   thead
     tr: td Header
      tbody
        - for(var i = 0, nbRows = items.length/3; i < nbRows; i++) {
        tr
           if items[3*i]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i].id}")
           if items[3*i + 1]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 1].id}")
           if items[3*i + 2]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 2].id}")
       - }

What you could do instead is tweak your model to make it more Jade-friendly, by grouping items by rows:

function getRows(items) {
    return items.reduce(function (prev, item, i) {
        if(i % 3 === 0)
            prev.push([item]);
        else
            prev[prev.length - 1].push(item);

        return prev;
    }, []);
}

This will turn:

[{id:1},{id:2},{id:3},{id:4},{id:5}]

into:

[
    [{id:1},{id:2},{id:3}],
    [{id:4},{id:5}]
]

Then your jade code becomes much simpler:

table
     thead
         tr: td Header
     tbody
        each row in rows
            tr
                each item in row
                    td: a(href="#{baseUrl}/admin.html?id=#{item.id}")

Answer 2

An example of jade + bootstrap, each 4 elements(columns) one row, and the rows goes inside the row.

```

- var i = 0
- var itens_per_line = 4
each order in viewBag.orders
    - if (i % itens_per_line === 0 || i === 0) {
        .row
    - }

            .col-md-3.column
                p #{order.number}
        - i++

```

Answer 3

Here is what I did for a single array (e.g. ['1','2','3','4']) to convert it into two values per row, it could be adjusted for 3.

(mixins are templates in Jade/Pug)

        mixin mInput
          div.form-group.col-md-6
            p=oval

        - var valcounter = 0
        - var row = [];
        each val in JSON.parse(formvalues)
          if(valcounter % 2 === 0)
            - var col = [];
            - col.push(val)
          else
            - col.push(val)
            - row.push(col)
          - valcounter++
        each orow in row
          div.row
            each oval in orow
              +mInput