Loop in Jade currently known as Pug template engine

Question

I want to use a simple loop like for int i 0  i lt 10  i        How do I use it in the Jade engine  I m working with Node js and use the expressjs framework

User · Answer

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

User · Answer

Using node I have a collection of stuff  stuff and access it like this   - each stuff in stuffs   p       stuff sentence

User · Answer

for example       - for  var i   0  i  lt  10    i      li  array i  -     you may see https   github com visionmedia jade for detailed document

User · Answer

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 lt 3  i                div  arr i

User · Answer

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  lt  3       li  item name     - count

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to for-loop

Examples related to pug

Examples related to express