Iteration

Pug supports two primary methods of iteration: each and while.

each

Pug’s first-class iteration syntax makes it easier to iterate over arrays and objects in a template:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

You can also get the index as you iterate:

<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>

Pug also lets you iterate over the keys in an object:

<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

The object or array to iterate over is just plain JavaScript. So, it can be a variable, or the result of a function call, or almost anything else.

<ul>
  <li>There are no values</li>
</ul>

One can also add an else block that will be executed if the array or object does not contain values to iterate over. The following is equivalent to the example above:

<ul>
  <li>There are no values</li>
</ul>

You can also use for as an alias of each.

while

You can also use while to create a loop:

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Iteration

each ¶

while ¶

each

while