drewwyatt drewwyatt - 1 month ago 11
Jade Question

How can I dynamically create rows in Jade?

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

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>