How to display JSON data to a front-end app using Flask
There are two ways to get data from the server to a front-end application. You can embed data from the server into the front-end app, or you can send data to the front-end app either on request or in realtime.
In this tutorial, I will show you how to use server-side rendering to embed JSON data into an app. I will also show you how to create an API endpoint and use a front-end app to request the JSON data.
Create Project Boilerplate
Pro tip: Open the file in Visual Studio Code and run
html:5to automatically generate the file boilerplate. You can press the
tabkey to navigate through each field and set the value
Add this JSON data to
pets.json in the data folder.
Create Virtual Environment
You can send the
index.html file down with the data embedded in the file.
render_template, you are accessing Jinja, a python templating engine. Jinja allows you to get data
from the python app to an HTML file in the
To pass in the data to the
index.html file, you pass in the
pets JSON data as a named parameter to
render_template. From there you can pipe
the data variable to the
Now all that's left is to start the server and look and the Browser Developer tools to make sure the data got logged! Do start the server run: