Loop in Jade (currently known as the “Pug”)

Question

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

How to use it in a jade engine? I work with Node.js and use the expressjs framework.

Answer 1

eg:

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

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

Answer 2

Using node I have @stuff and access it as follows:

 - each stuff in stuffs p = stuff.sentence 

Answer 3

An unusual but beautiful way to do it.

Without index :

 each _ in Array(5) = 'a' 

Will be printed: aaaaa

With an index :

 each _, i in Array(5) = i 

It will be printed: 01234

Notes . In the above examples, I assigned the jade each iteration syntax val parameter to _ because it is necessary, but will always return undefined .

Answer 4

Here is a very simple jade file that has a loop in it. Jade is very space-sensitive. After the line for the definition of the loop ( for ), you must specify the indent (tab) for what you 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] 

Answer 5

Just add one more option, as this may help someone who is trying to iterate over an array AND maintain the count. For example, the code below goes through an array named items and displays only the first 3 elements. Note that each and if are native jade and do not need a hyphen.

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

Answer 6

You can also speed up the process with a while (see here: http://jsperf.com/javascript-while-vs-for-loops ). Also much more concise and legible IMHO:

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

Answer 7

Pug (renamed from "Jade") is a template engine for developing a complete web application stack. It provides neat and clean syntax for writing HTML and supports strict indentation in the form of spaces (for example, Python). It was implemented using the JavaScript API. The language basically supports two iterative constructs: each at the same time. "for" can be used instead of "everyone." Please refer to the language link here:

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

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