Creating Dynamic Templates with Jinja: Intermediate

January 29, 2018

This guide builds on the concepts in Creating Dynamic Templates with Jinja: Introduction and aims to help you create more advanced dynamic templates with Jinja.

Sample Data

Use the sample data below to follow along with the examples in this guide. Any "Rendered result:" preview below is based on this sample data. You can also try examples in the Dyspatch Editor by adding the data below into the Sample Data tab and any Jinja examples into the Body tab.

 {
  "first_name": "lucy",
  "forest": {
    "name": "sherwood",
    "animals": ["lion", "tiger", "bear", "owl"]
  },
  "weather": "sunny"
 }

Nested Objects

Remember that data passed to a template is formatted as a JSON object. A JSON object is a list of key (e.g. "first_name") and value (e.g. "lucy") pairs surrounded by curly braces {}. A value in a JSON object can even be another JSON object or a "nested object". The sample data provided above has a nested JSON object as the value of the key "forest", with its own set of key and value pairs.

Variables for Nested Objects

Access values in a nested object by calling on the nested object's key (e.g. "forest") and then the key for the desired value within it (e.g. "name"). This can be done with either dot notation . or bracket notation []. Note that within bracket notation quotes must be respected forest['name'], but with dot notation forest.name quotes can be omitted.

1. {{ forest.name }}
<br />

2. {{ forest['animals'] }}
<br />
{# These two methods can also be used to access items in a list as well #}
{# Note that in Jinja, the list's index starts at 0 #} 

3. {{ forest['animals'][0] }}
<br />

4. {{ forest.animals.1 }}

Rendered result:

  1. sherwood
  2. ['lion', 'tiger', 'bear', 'owl']
  3. lion
  4. tiger
The example above uses <br /> tags to create line breaks in the text. The <br /> tag is still used in email HTML as it has good support across email clients

Variable Assignment with Set and Block Set

Set and block set can both be used to assign a value to a variable.

Set Assignment

Set allows you to specify a name and assign it a value {% set name = value %} to create a variable you can use in your template. This can be handy if you want to simplify complex or long lines of code for use throughout the template.

{% set forest_name = forest.name|capitalize ~ " Forest" %}

{{ forest_name }}

Rendered result:

Sherwood Forest

The example above uses '~' (the tilde character) for string concatenation, so you can add words together

Block Assignment

Block set is the same idea, but can be used to wrap a block of code to assign it to a variable.

{% set navigation %}
  <a href="">Login | </a>
  <a href="">Learn More | </a>
  <a href="">Contact Us</a>
{% endset %}

{{ navigation }}

Rendered result:

Login | Learn More | Contact Us

Comparison Operators

Comparison operators are used to compare two values, so you can perform logic based on the outcome of the comparison. We've used the == (equals) in examples before but there are other options too! Here are some examples using different comparison operators, you can find more on the Jinja Docs here.

{# == 'equals' #}
{% if weather == "sunny" %}
 1. Sunny weather!
{% endif %}
<br />

{# != 'does not equal' #}
{% if weather != "sunny" %}
 2. Not sunny weather :(
{% endif %}
<br />

{# > 'greater than' #}
{% if forest.animals|length > 1 %} 
 3. More than one value in the list forest.
{% endif %}
<br />

{# < 'less than' #}
{% if forest.animals|length < 4 %} 
 4. Less than four values in the list forest.
{% endif %}
<br />

{# <= 'less than or equal to' #}
{% if forest.animals|length <= 4 %} 
 5. Less than or equal to four values in the list forest.
{% endif %}

Based on our sample data if statements 2 and 4 are false, this means that their text will not be rendered.

Rendered result:

1. Sunny weather!
3. More than one value in the list forest.
5. Less than or equal to four values in the list forest.

For Loop Variables

Jinja provides special variables that can be used inside a for loop. These variables provide access to values inside or about the for loop, like the last value that is passed into the loop, the current position of the for loop(or index) and more!

The example below uses two special for loop variables to populate and style an HTML list: loop.cycle and loop.index.

<style media="screen" type="text/css">
  ul {
    padding: 0px;
    width: 100px;
  }
  .odd {
    background-color: lightgrey;
  }
  .even {
    background-color: lightblue;
  }
</style>
<ul>
  {% for animal in forest.animals %} 
    <li             
      class="{{ loop.cycle('odd', 'even') }}"
    > 
      {{ loop.index }} {{ animal }} 
    </li>
  {% endfor %} 
</ul>

Let's walk through the example above:

  • First, we've set up styling for a list ul and two classes .odd and .even with different background colors to alternate between.
  • After the <ul> opening tag is a for loop which will apply a block of code to each value in the list "forest" to build the list elements.
  • To alternate the background colors, loop.cycle cycles through the values we specified ('odd', 'even'), adding one or the other as the class name for each list item.
  • Finally, loop.index is used to insert the index number next to the animal name as the content in the list element.

Rendered result:
styled list with for loop variables

Further Reading

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support