Learn how to load data retrieved from API using Jinja

This is one of the most important parts of any dynamic website where data has to be changed depending on the user's interactions.

HTML only holds the data which was written in its elements and that data does not change no matter how many times you use a website. But when it comes to data that is specific to every individual user we cannot type it statistically. That is why APIs are built and used for fetching and storing large amounts of data in databases which makes a web application efficient and faster.

Here the data is not directly fetched to the HTML page but first APIs fetch the data as users wish and if there is any manipulation to be done on the data will be carried out by APIs and some of the manipulations are also done with jinja in the HTML page. Like displaying a large set of objects in the same format.

This practice of rendering data is not only done using Jinja. A function in the Python API is to write which does all the magic.

Here below is the Python code to send data from API to the HTML page.

from flask import Flask, render_template

app = Flask(__name__)

sample_data = ["Mango", "Apple", "Kiwi", "Banana"]

@app.route('/sampledata')
def sampledatadisplay():
    return render_template('HTML_PAGE_HERE.html', data = sample_data)

if __name__ === "__main__":
    app.run(debug=True)

The above has an object which contains the names of the fruits and which will be passed as sample data to the HTML page.

You can see the sampledatadisplay() function which is returning an HTML page and where the data will be sent. This Function is called when that route is passed in the url. Ex : ip:add:ress/sampledata

Wheneven that route is called then html page which is returned in that function is loaded at the client side.

What's render_template ?

Render template is a function in Flask which is used to render an HTML page as a template and return when the route is called from the client side. it also takes in variables as arguments which can later be used in the HTML page. This function is present in the Flask class/package we need to just import it into our program.

Now let's see have to organize or use the data in the HTML which we passed to the HTML file. This can be done using the Jinja template engine which helps use fetch and organize data sent from Flask API to the HTML page

<html>
<head>
<title>Sample for Rendering Data</title>
</head>
<body>
<!-- Name of the variable which we passed throught render_template function -->
{% for i in data %}
<p>{{ data[i] }}</p>
{% endfor %}
</body>
</html>

Ufff... Confusing 🤢.

You would probably be thinking how the heck can you use for loop in HTML and why are you using it?

Check out my upcoming article on Jinja Which will give you a clear view of what's going on above.

Don't worry still I will explain what's going on above.

If you are familiar with Python's for loop which looks pretty much like the one above. so all the syntaxes of jinja are similar to Python's. Remember the data we passed with the variable name data is an array. So to place every individual element of the array in html we need to loop through that array using for loop. " i " keeps track of the index of each element and {{ data[i] }} this line prints every element of the array following index no. Creates paragraph tags for every element and fills the data in it. This process keeps goes on until all the elements of the array aren't over.

This is on of the way to load the data sent from the API into the HTML page. Further there are more to come

How to Render and present data with flask

Subscribe to my newsletter

Shaik Mohammed Huzaifa

Shaik Mohammed Huzaifa