Iterate JS array in Pug
20-07-2020 | #pug
If you want to iterate through an JS array in Pug and create template elements, you can use each block to do that.
ul
each val in [1, 2, 3, 4, 5]
li= val
/*
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
*/
Pug also allows you to get the index of the element
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
/*
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
*/
If the array empty, you can use the else block without checking the length of the array
- var values = [];
ul
each val in values
li= val
else
li There are no values
/*
<ul>
<li>There are no values</li>
</ul>
*/
I create a video if you prefer learning by watching