CODEWITHSUNDEEP
javascriptfor-looppugexpress
Huy Tran
Huy Tran

Reputation: 4431

Loop in Jade (currently known as "Pug") template engine

I want to use a simple loop like for(int i=0; i<10; i++){}.

How do I use it in the Jade engine? I'm working with Node.js and use the expressjs framework.

Upvotes: 57

Views: 132204

Answers (7)

Amlan Samanta - Rx
Amlan Samanta - Rx

Reputation: 1

Pug (renamed from 'Jade') is a templating engine for full stack web app development. It provides a neat and clean syntax for writing HTML and maintains strict whitespace indentation (like Python). It has been implemented with JavaScript APIs. The language mainly supports two iteration constructs: each and while. 'for' can be used instead 'each'. Kindly consult the language reference here:

https://pugjs.org/language/iteration.html

Here is one of my snippets: each/for iteration in pug_screenshot

Upvotes: -2

Christophe Marois
Christophe Marois

Reputation: 6719

An unusual but pretty way of doing it

Without index:

each _ in Array(5)
  = 'a'

Will print: aaaaa

With index:

each _, i in Array(5)
  = i

Will print: 01234

Notes: In the examples above, I have assigned the val parameter of jade's each iteration syntax to _ because it is required, but will always return undefined.

Upvotes: 36

Mohsen
Mohsen

Reputation: 65785

Here is a very simple jade file that have a loop in it. Jade is very sensitive about white space. After loop definition line (for) you should give an indent(tab) to stuff that want to go inside the loop. You can do this without {}:

- var arr=['one', 'two', 'three'];
- var s = 'string';
doctype html
html
    head
    body
        section= s
        - for (var i=0; i<3; i++)
            div= arr[i]

Upvotes: 19

k00k
k00k

Reputation: 17573

Just adding another possibility as it might help someone that's trying to both iterate over an array AND maintain a count. For example, the code below goes through an array named items and only displays the first 3 items. Notice that the each and the if are native jade and don't need a hyphen.

ul
  - var count = 0;
  each item in items
    if count < 3
      li= item.name
    - count++;

Upvotes: 10

SqrBrkt
SqrBrkt

Reputation: 105

You could also speed things up with a while loop (see here: http://jsperf.com/javascript-while-vs-for-loops). Also much more terse and legible IMHO:

i = 10
while(i--)
    //- iterate here
    div= i

Upvotes: 6

qiao
qiao

Reputation: 18219

for example: 

- for (var i = 0; i < 10; ++i) {
  li= array[i]
- }

you may see https://github.com/visionmedia/jade for detailed document.

Upvotes: 93

Sam 山
Sam 山

Reputation: 42865

Using node I have a collection of stuff @stuff and access it like this:

- each stuff in stuffs
  p
    = stuff.sentence

Upvotes: 78

Related Questions