Nested jade via conditional logic

Question

I've got a result set of json data that is retrieved that is called data_list. I want to iterate through it and pull out its name field and embed it it in a twitter bootstrap grid metaphor. The output of this would look something like the following:

<div class="row">
   <div class="span4">Name 1</div>
   <div class="span4">Name 2</div>
   <div class="span4">Name 3</div>
</div>
<div class="row">
   <div class="span4">Name 4</div>
   <div class="span4">Name 5</div>
   <div class="span4">Name 6</div>
</div>

The problem is I'm not sure how to accomplish this in Jade. I know how to iterate through my data with

- for (var key in data_list)
    div.span4
        p= data_list[key].name

What I don't know how to do is to inject the in for every three records of data and have it surround those three records. I know how to capture every three records via

- if ((key % 3) == 0)
    .row

but I can only get it to output a but I can't get it to surround the other rows. Any suggestions would be greatly welcome.

Answer 1

I was facing the same problem yesterday using bootstrap.

I solved it this way:

each element, i in dataset
  if i % 3 == 0
    div.row
      each elementInRow, j in dataset.slice(i, i+3)
        div.span4
          ...cell code...

Hope it helps!