CODEWITHSUNDEEP
htmlnode.jsexpresspugeach
Yves
Yves

Reputation: 1156

Each loop with if condition in Jade-Template

Hej.

I'm trying to write an tr just at the beginning and after every 9th element. To do so I use the modulo Operator as you can see in the example above.
But if I would like to write td's in between into that same tr with an else condition for example it creates another tr.

Does anybody see what's wrong? Or how it could work?

Code Example

extends layout.jade

    block body  
       table  
         each result, i in results
         if (i%9==0)
           tr
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company  
         else
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company

HTML output

Jade Html output

Upvotes: 4

Views: 6574

Answers (1)

Tom
Tom

Reputation: 26819

One of the solutions would be as follows:

Let's say you have a variable results in your express handler:

var results =  ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r'];

Note that this might be an array of objects. For simplicity purposes I used strings from a through `r.

Let's split that array into 2 dimensional array of rows and columns:

var results2d = [];
while(results[0]) {
     results2d.push(results.splice(0, 9));
}

I always prefer to perform all transformations inside express handlers in order to reduce number of additional lines of codes inside a template.

So your results2d would be as follows:

[ [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
  [ 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p' ],
  [ 'q', 'r' ] ]

Then you can pass it over to the Jade template:

res.render('templateId', { results:results2d  });

Inside the template your code could be as follows:

table  
    - var i = 1;
    each result in results
        tr
            each item in result
                td.ranking
                    div.rank
                        p=(i++)+'.'
                        div.points
                            p=result.points
                        div.person                              
                            p.name=result.name
                            p=result.company

And your HTML output would be as follows:

results

I hope that will help.

Upvotes: 1

Related Questions