How can I dynamically create rows in Jade? - node.js

Question

Right now I have this:
- count = 0
- each organization in organizations
if (count == 0 || count % 3 == 0)
.row
.col-md-4
a(href="#{organization.url}" target="_blank")
.fancyy-box
h3= organization.name
img(src="/images/organizations/#{organization.logo}")
p= organization.mission
- count = count + 1
What I am trying to do is start a new row every third organization, so that I get:
<div class="row">
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
</div>
<div class="row">
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
</div>
// and so on...
Right now I am getteing:
<div class="row" />
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
<div class="row" />
<div class="organization">...</div>
<div class="organization">...</div>
<div class="organization">...</div>
<div class="row" />
Is there an easy way to accomplish this?

Answer 1

Like Mukesh Soni said you need to think about your indentation. But this is just one part of your problem, the second thing I recognized is your conditional statement and your loop. I edited this a little bit like you can see below:
- for (var j = 0; j < organizations.length; j++)
if (j == 0 || j % 3 == 0)
.row
- for (var i = j; i < (3 + j); i++ )
- if (i >= organizations.length) break;
.col-md-4
a(href="#{organizations[i].url}" target="_blank")
.fancyy-box
h3= organizations[i].name
img(src="/images/organizations/#{organizations[i].logo}")
p= organizations[i].mission
So in the first for loop I simply post a row every three times of iteration, in the second for loop I add your data, simply by adding 3 lines / divs. If i gets bigger then your data - it breaks.
Here an example: first my data
{
organizations: [
{name: 'demo1', url: 'example.com', logo: 'pic1.jpg', mission: '1'},
{name: 'demo2', url: 'anotherexample.com', logo: 'pic2.jpg', mission: '2'},
{name: 'demo3', url: 'justanotherexample.com', logo: 'pic3.jpg', mission: '3'},
{name: 'demo4', url: 'wowjustanotherexample.com', logo: 'pic4.jpg', mission: '4'}]
}
Now the HTML output:
<div class="row">
<div class="col-md-4">
<a href="example.com" target="_blank">
<div class="fancyy-box">
<h3>demo1</h3><img src="/images/organizations/pic1.jpg"/>
<p>1</p>
</div>
</a>
</div>
<div class="col-md-4">
<a href="anotherexample.com" target="_blank">
<div class="fancyy-box">
<h3>demo2</h3><img src="/images/organizations/pic2.jpg"/>
<p>2</p>
</div>
</a>
</div>
<div class="col-md-4">
<a href="justanotherexample.com" target="_blank">
<div class="fancyy-box">
<h3>demo3</h3><img src="/images/organizations/pic3.jpg"/>
<p>3</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="wowjustanotherexample.com" target="_blank">
<div class="fancyy-box">
<h3>demo4</h3><img src="/images/organizations/pic4.jpg"/>
<p>4</p>
</div>
</a>
</div>
</div>

Answer 2

You could do this
.row
each organization, i in organizations
if i > 0 && i % 3 === 0
// jade/pug can interpret html
</div><div class="row">
// past you col template here
.col-md-4
a(href="#{organizations[i].url}" target="_blank")
.fancyy-box
...