How to iterate over a dictionary in Jinja2 using FastAPI?

Question

I have a temp.py file and I have used FastAPI to return string or a dictionary with 2 get methods one for string another for dictionary.

I also have a temp.html file inside templates folder.

I am using Jinja2Templates as the template engine in HTML as the frontend view.

If the output result from FastAPI is string, I just want to display, as it is. But if the output variable is dictionary, I want to iterate over it and print each key and value pair in a new line.

I have tried this piece of code but I am getting Internal Server error while calling the get method for printing dictionary output.

Backend

from fastapi.templating import Jinja2Templates
from fastapi import FastAPI, Request
import uvicorn

app = FastAPI()
templates = Jinja2Templates(directory="templates")


@app.get("/hello")
async def form_get(request: Request):
    output = "HELLO"
    return templates.TemplateResponse('temp.html', context={'request': request, 'result': output})


@app.get("/dic")
async def form_post(request: Request):
    test = {1: 56, 2: 45, 3: 46, 4: 35, 5: 69}
    return templates.TemplateResponse('temp.html', context={'request': request, 'result': test})

if __name__ == "__main__":
    uvicorn.run("temp:app", reload=True)

Frontend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<p>
    {% if result == "HELLO" %}
        {{ result }}
    {% else %}
        {% for key, value in result.item() %}
            {{ key }} : {{ value }}
        {% endfor %}
    {% endif %}
</p>
</body>
</html>

See related posts here and here.

Chris
– Chris

2022-11-26 16:59:37 +00:00
Commented Nov 26, 2022 at 16:59 — Chris
– Chris, Commented Nov 26, 2022 at 16:59
@Chris Yeah for sure, I will do that.

Biswajeet Padhi
– Biswajeet Padhi

2022-11-27 12:01:09 +00:00
Commented Nov 27, 2022 at 12:01 — Biswajeet Padhi
– Biswajeet Padhi, Commented Nov 27, 2022 at 12:01

Chris · Accepted Answer · 2023-10-26 06:25:37Z

3

Backend

from fastapi import Request

@app.get('/')
async def main(request: Request):
    d = {1: 56, 2: 45, 3: 46, 4: 35, 5: 70}
    return templates.TemplateResponse('temp.html', context={'request': request, 'result': d})

Frontend

The error is in your Jinja2 template when trying to access the items of the dictionary (you are actually missing an 's' at the end)—for future reference, make sure to have a look at the console running the app when coming across Internal Server Error; it should provide you with details regarding the error. That should be:

{% for key, value in result.items() %}
    {{ key }} : {{ value }}
{% endfor %}

Related answer can be found here as well. Additionally, I would suggest having a look at this answer to understand the difference between defining your endpoint with normal def and async def endpoints.

edited Oct 26, 2023 at 6:25

answered Nov 26, 2022 at 17:07

Chris

38.5k11 gold badges106 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to iterate over a dictionary in Jinja2 using FastAPI?

Backend

Frontend

1 Answer 1

Backend

Frontend

Comments

Linked

Hot Network Questions