How to pass in a JSON object to a template in Flask?

Question

I have been developing a website in Flask and recently have begun refactoring my routes to accommodate an API framework. However, I am having trouble passing JSON data from my API (which comes from calling Flask's jsonify() on a dict within the API) into views using Flask's render templates.

For example without the API a view function's return would look like

return render_template('project.html', name=proj.name, description=proj.description, tags = proj.tag_list ...)

with the API, where all the relevant data for a model is contained within a JSON object, I have been attempting something of the form:

return render_template('project.html', jsonobj=api.project.get_project(project_id))

where the associated API function is

def get_project(id):
    return jsonify(Project.query.get_or_404(id).to_dict())

However, the data is unable to render in the HTML properly. If I pass in a dictionary to jsonobj instead - i.e., Project.query.get_or_404(id).to_dict() - the data will render. But I don't want to have to reconvert the JSON to a dictionary as this is an extra step.

Edit: I'm realizing that I perhaps shouldn't be using render_template() to pass data to the html and populate the page (as found here). It seems like if I'm constructing an API I should be populating my HTML from JavaScript. However I'm not sure what the best way to do this is with Flask, and while I've found some related threads am not sure what the optimal solution is.

From what you've described, you don't need to use `jsonify`. That function creates a `Response` object, i.e. you use it when you want to send JSON to a client. It looks like you just need to pass the `dict` into your `render_template` function. You've already created an extra step by using `jsonify`. — PGHE, Jun 15 '21 at 03:34
I see what you mean, but in general isn't it common practice for an API to return JSON? i.e., if I want to make a mobile app it would make more sense that this app receives JSON from the API, right? Also, should I still be using the render_template for passing data with an API (see edit)? — Brian Barry, Jun 15 '21 at 04:58
If you're sending data to the client, JSON is a common format. However, if you're working on the server i.e. calling another function to retrieve data to pass into another function, there's no need to add the overhead of serializing and deserializing data between a `dict` and JSON. If you want to populate data into an already loaded page as per your edit, you'll need to look into how to make and AJAX request from your client. — PGHE, Jun 15 '21 at 21:54

score -1 · Answer 1 · answered Jun 15 '21 at 06:53

You can do this, either way, create a dict and then pass it as an argument or you can use JSON library for making a dump and then send it to the frontend.

data = data.to_json(orient="split")
data = json.loads(data)
data = json.dumps(data)
data = {
    "data":data
}
return data

it works in my case, take a look and let me know if it doesn't work, will figure this out.

How to pass in a JSON object to a template in Flask?

1 Answers1