CODEWITHSUNDEEP
node.jspug
drewwyatt
drewwyatt

Reputation: 6027

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?

Upvotes: 3

Views: 2523

Answers (2)

Tamo Maes
Tamo Maes

Reputation: 365

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
        ...

Upvotes: 0

ztirom
ztirom

Reputation: 4438

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>

Upvotes: 3

Related Questions