Filters

Filters are a Nunjucks feature that you can use within your page templates.

They are useful for improving visual formatting or for displaying a calculated value.

How to use filters

To use a filter, add the | character (a vertical line or ‘pipe’), and then the name of the filter.

For example, the upper filter can be used to display all the letters in uppercase:

Your postcode is {{ data.postcode | upper }}.

You can also use filters within Nunjucks macros for NHS components.

For example, if you have a question with checkboxes, you can use the join filter to display the checked answers in a summary list, with a comma and a space between each one:

{{ summaryList({
  rows: [
    {
      key: {
        text: "Symptoms"
      },
      value: {
        text: data.symptoms | join(", ")
      }
    }
  ]
}) }}

Useful filters

Here are some filters often used within prototypes:

Text filters

• upper – makes all letters uppercase
• lower – makes all letters lowercase
• nl2br – replaces line breaks with <br> tags

List (or array) filters

• length – counts the number of items in the list
• first – the first item in the list
• last – last last item of the list
• reverse – reverses the order
• join(", ") – joins the items in the list with a separator
• sort – orders the items alphabetically (A-Z) or numerically (lowest first)
• sort(true) – orders the items in reverse alphabetically (Z-A) or numerically (highest first)

Number filters

• round – rounds a decimal to the nearest whole number

See the full list of built-in filters in the Nunjucks documentation.