ExpressJS: Pug Case Statement

In the post ExpressJS: Pug Conditionals we have seen how we can write conditions in Pug template using if else. One more way to write condition is using case statement in Pug template.

The case statement is a shorthand for JavaScript's switch statement. It takes the following form-

case variable
  when value1
    // Code block
  when value2
    // Code block
  ..
  ..
  default
    // Code block for default

Variable may be of type number or string.

Express.js - Pug case example

In the example pug template, we iterate over an array of date objects which has properties date and country. By using case with date.country we format the date in different formats based on the country.

app.js

const express = require('express');

const app = express();

const port = 3000;
const path = require('path');
app.locals.date = require('date-and-time');

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

const dates = [{date:'2003-08-19', country: 'USA'}, 
    {date:'2012-11-23', country: 'UK'},
    {date:'2023-02-11', country: 'India'},
    {date:'2023-09-17', country: 'Germany'},
    {date:'2023-09-17', country: 'Hungary'}
]

app.get('/country', (req, res) => {
    res.render('country', {dates: dates, pageTitle: 'Country Page'});
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

Important points to note here-

Code uses date-and-time JS library which is just a collection of functions for manipulating date and time.
Install date-and-time library using the command-
```
npm i date-and-time
```
Since we need to use date-and-time functions in the template so it is imported using app.locals. The app.locals object has properties that are local variables within the application, and will be available in templates rendered with res.render

views\country.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title #{pageTitle}
  body
    h3 Case Statement Demo 
      ul
        each d in dates
          case d.country
            when "India"
            when "UK"
              li= date.format(new Date(d.date),'DD/MM/YYYY') + ' ('+d.country + ')'
            when "USA"
              li= date.format(new Date(d.date),'MM-DD-YYYY') + ' ('+d.country + ')'
            when "Germany"
              li= date.format(new Date(d.date),'YYYY-MM-DD') + ' ('+d.country + ')'
            default 
              li= date.format(new Date(d.date),'YYYY/MM/DD') + ' ('+d.country + ')'

In the code, iteration is done over the dates array and case statement is used with d.country. Based on the value of the country different formats are passed with date.format() which is a function from date-and-time JS library used in the template.

Now if you run the app.js and access the URL- http://localhost:3000/country

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

You may also like

KnpCode

July 5, 2024

ExpressJS: Pug Case Statement

Express.js - Pug case example

No comments:

Post a Comment