ExpressJS: Pug Template Iteration Examples

In the post ExpressJS: Pug Template Engine Integration With Examples we have seen how you can use Pug template with Express.js app. In this post we'll see how to iterate over an array or object in Pug template.

Iteration in Pug

In Pug you can iterate over values using one of the following-

each
while

For example, using each with an array of values.

ul
  each val in [1, 2, 3, 4, 5]
    li= val

This transforms to an HTML

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

Using each to iterate over an object and accessing both key and value.

ul
  each val, key in {name:'Badal', age: 34, gender:'M'}
    li= key + ': ' + val

This transforms to an HTML

<ul>
  <li>name: Badal</li>
  <li>age: 34</li>
  <li>gender: M</li>
</ul>

Using while to create a loop

- var n = 0;
ul
  while n < 5
    li= n++

This transforms to an HTML

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

Express.js - Pug iteration example

Let's assume we have an array of User objects which we want to iterate and display in our view named 'test' which is created as a Pug template.

app.js

const express = require('express');

const app = express();

const port = 3000;
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

const users = [{name:'Reene', age: 28, gender:'F'}, 
    {name:'Badal', age: 34, gender:'M'},
    {name:'Vidyut', age: 25, gender:'M'},
    {name:'Dhriti', age: 29, gender:'F'}
]
app.get('/', (req, res) => {
    res.render('test', {users: users, pageTitle: 'User Page'});
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

public\css\main.css

CSS used for styling.

.main{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.header{
  width: 100%;
  height: 3rem;
  text-align: center;
  background-color: #6d70a8;
  padding: 1 2rem;
  color: antiquewhite;
}

views\test.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title #{pageTitle}
    link(rel="stylesheet", href="/css/main.css")
  body 
    h2.header A pug template
    table
      each user in users
        tr 
          td= user.name
          td= user.age
          td #{user.gender}

As you can see iteration is done using each, in each iteration one user object is taken from the users array and the properties are displayed. A table is created where each row represents one user record.

This is the generated HTML that you can view by going to page source.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Page</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body> 
    <h2 class="header">A pug template</h2>
    <table>
        <tr> 
          <td>Reene</td>
          <td>28</td>
          <td>F</td>
        </tr>
        <tr> 
          <td>Badal</td>
          <td>34</td>
          <td>M</td>
        </tr>
        <tr> 
          <td>Vidyut</td>
          <td>25</td>
          <td>M</td>
        </tr>
        <tr> 
          <td>Dhriti</td>
          <td>29</td>
          <td>F</td>
        </tr>
    </table>
  </body>
</html>

Getting the index

You can also get the index as you iterate. Here is the same Pug template as used above with the inclusion of index to get serial number.

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title #{pageTitle}
    link(rel="stylesheet", href="/css/main.css")
  body 
    h2.header A pug template
    table
      each user, index in users
        tr
          td= index+1+'.'
          td= user.name
          td= user.age
          td #{user.gender}

If you run app.js and then access http://localhost:3000/

Pug object iteration ExpreeeJS example

If you want to iterate an object and extract the (key, value) pairs.

app.js

const express = require('express');

const app = express();

const port = 3000;
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
//Object to be iterated
const user = {name:'Reene', age: 28, gender:'F'};
app.get('/', (req, res) => {
    res.render('test', {user: user, pageTitle: 'User Page'});
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

views\test.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title #{pageTitle}
    link(rel="stylesheet", href="/css/main.css")
  body 
    h2.header A pug template
    ul
      each val, key in user
        li= key.charAt(0).toUpperCase() + key.substr(1).toLowerCase() + ': ' + val

CSS remains the same as used in the above example.

With that you'll get the result as-

  Name: Reene
  Age: 28
  Gender: F

That's all for the topic ExpressJS: Pug Template Iteration Examples. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

June 28, 2024