Display FastAPI response (tuple) in an HTML textarea using Jinja2 Templates

Question

Here is my FastAPI backend:

main.py

from typing import Optional
from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory='./')

@app.get("/")
def index():
    return "Hello World"

@app.get("/item/{text}")
def get_item(text: str):
    return {"result": tuple(['Hi', 'hello'])}

@app.get("/form")
def form(request: Request):
    result = ""
    return templates.TemplateResponse('form.html', context={'request': request, 'result': result})

@app.post("/form")
def form(request: Request, text: str=Form(...)):
    
    result = ['Hello', 'Hi', 'Bye'] # to simplify the example
    return templates.TemplateResponse('form.html', context={'request': request, 'result': tuple(result)})

Here is the Jinja2 template:

form.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Small example</title>
  </head>
  <body>
    <form method="post">
      <label for="text">Input text:</label>
      <br>
      <textarea id="text" name="text" rows="12" cols="50"></textarea>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <br></br>
    <form method="post">
      <label for="text">Result:</label>
      <br>
      <textarea id="result" name="result" rows="12" cols="50"> {{ result }} </textarea>
      <br/>
    </form>
  </body>
</html>

Here, I get the result in the text area as: ('Hello', 'Hi', 'Bye').

What I need is to display it line by line in the result textarea:

Hello. 

Hi. 

Bye.

Chris · Accepted Answer · 2022-10-29 06:01:17Z

1

Option 1

You could loop through the tuple, as shown below:

<textarea id="result" name="result" rows="12" cols="50"> 
    {% for i in result %}
        {{ i }}
    {% endfor %}
</textarea>

Option 2

You could also write the aobve in a single line, as the above doesn't seem to align the text to the left, unless you shift the whole Python code to the left side. Use the below along with 
, as described here, to add line breaks between the items.

<textarea id="result" name="result" rows="12" cols="50">{% for i in result %}{{ i }}&#13;&#10;{% endfor %}</textarea>

edited Oct 29, 2022 at 6:01

answered Feb 15, 2022 at 6:11

Chris

38.5k11 gold badges106 silver badges282 bronze badges

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

Collectives™ on Stack Overflow

Display FastAPI response (tuple) in an HTML textarea using Jinja2 Templates

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related