Jinja is a template language Flask uses to create HTML pages. A template combines ordinary HTML with placeholders and instructions that are filled when Flask renders the page with supplied data. section 12.1 section 12.0
Use double curly braces to display a value, such as {{ new_order["drink"] }}. Pass a dictionary, variable, or list to render_template(), then refer to that data inside the template. section 12.0 section 12.1
Templates can also repeat markup with Python-like for loops. Instead of writing each menu option or table row by hand, loop through a list of drinks or stored orders and generate one piece of HTML for every item. section 12.0 section 12.1
Render an order menu from lists
A Flask route passes drinks, flavors, and toppings into order.html. Each select menu loops over its list, uses {{ d }} for the option value, and uses the capitalize filter for the displayed label. Adding an item to a menu file can therefore appear as a new option after the application restarts. section 12.0
Listing 12.8 The templates/list.html template with the for loop
{% extends "base.html" %}
{% block content %}
<table>
<tr>
<th>Name</th>
<th>Drink</th>
<th>Flavor</th>
<th>Topping</th>
</tr>
{% for o in orders -%}
<tr>
<td>{{ o['name'] }}</td>
<td>{{ o['drink'] }}</td>
<td>{{ o['flavor'] }}</td>
<td>{{ o['topping'] }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
This template shows a table header followed by a loop that renders name, drink, flavor, and topping values for every order. section 12.0
A small working pattern is:
- Collect or retrieve data in Flask, such as menu lists or database orders. section 12.0
- Pass the data into render_template() under a useful name. section 12.0
- Write HTML that displays values with {{ }} or repeats markup with {% for %} and {% endfor %}. section 12.0
