Python Flask – Render List From Python to Jinja2 template

 

In this tutorial we see how to render a python list of data from Python backend code to jinja2 template.

Our frontend is based on Jinja2 templating language and we can easily pass list of data to html from our python code.

We will be using materializecss to render nice cards containing data from our Python list.

What is Flask?

Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions.
Flask was created in 2010 by Armin Ronacher and is released under BSD license.

Flask is based on Werkzeug and Jinja2. Werkzeug enables Flask listen to and answer requests.

Flask is designed to be as small and thin as possible so the feature set has to be limited. This makes Flask more unopinionated such that it caters for a wide variety of developers.

For instance with Flask, you can write a simple but fully working and deployable web app in a single file. Name the frameworks you know that can do that?

Jinja2 is a templating language and allows us pass data to our HTML user interface and perform basic expressions.

If you prefer a video tutorial check here:

What is Jinja2 ?

Jinja2 is a modern templating language for Python and was influenced by Django’s templates.

It’s fast and secure as it provides an optional sandboxed template execution environment.

More information about jinja2 can be found here.

What is Materializecss?

Materializecss is a modern responsive front-end framework based on Material Design. It speeds up development and yet allows us create awesome material design user interface components. It has a rich set of pre-built components that we can use.

In this class we will be interesetd in using Cards and List. So we will be displaying a list of cards. Those Cards will be rendering data from our python list.

You can download materializecss here or include it from CDN(Content Delivery Network). The links are in that page.

Flask Installation

Flask can be installed via the following command.We can use pip package manager:

For more details check here.

Let’s go.

Python List

list is a python built-in list type that allows us to work with sequences of data. List literals are written within square brackets [ ]. Lists work similarly to strings — use the len() function and square brackets [ ]to access data, with the first element at index 0.

Here’s an example of a List.

Flask Example with List

Let’s start.

First you’ll specify imports:

In this case we’ve imported Flask and render_template from flask package.

Then we instantiate the Flask holding it in the app variable.

We then define our index function and route it to the root url using the @app.route() decorator.
This function will be rendering our template via the render_template function and we specify template name, some strings that we are passing to template and the get_galaxies() function that will be returning a list. We will pass that list to our jinja2 template.

We define the list that will be passed to our template:

Then run the app:

Here’s the complete source code for our Controller.

FlaskList.py

OurFlasList.py code:

Our View/User interface

Then we come to our View.

First we’ll specify the url for our materializecss which is a static file. We’ll use the url_for() function in our jinja2 expression:

We’ll write a jinja2 block that will loop through our list and populate our materialize list of cards:

Here’s the complete source code for our view.

index.html

Our index.html code:

Result

Best Regards.