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>

Asked By: Biswajeet Padhi

||

Source

Answer 1

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 %}

Also, I would suggest you take a look at this answer to understand the difference between defining your endpoint with the normal def and async def.

Answered By: Chris

How to iterate over a dictionary in Jinja2 using FastAPI?

Question:

Backend

Frontend

Answers:

Backend

Frontend