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

JavascriptFor LoopPugExpress

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

for example:

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

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

Solution 2 - Javascript

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

- each stuff in stuffs
  p
    = stuff.sentence

Solution 3 - Javascript

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.

Solution 4 - Javascript

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]

Solution 5 - Javascript

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++;

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHuy TranView Question on Stackoverflow
Solution 1 - JavascriptqiaoView Answer on Stackoverflow
Solution 2 - JavascriptthenengahView Answer on Stackoverflow
Solution 3 - JavascriptChristophe MaroisView Answer on Stackoverflow
Solution 4 - JavascriptMohsenView Answer on Stackoverflow
Solution 5 - Javascriptk00kView Answer on Stackoverflow
Solution 6 - JavascriptSqrBrktView Answer on Stackoverflow
Solution 7 - JavascriptAmlan Samanta - RxView Answer on Stackoverflow