Display fastapi response (tuple) in a html textarea

Question

Here is a small example to start with fastapi:

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

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 · Answer 1 · 2022-02-15T10:59:12.310

You could loop through the tuple:

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

You could also type the aobve in one line, as the above doesn't seem to align the text to the left, unless you shift the whole python code to the left. Use 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>

Display fastapi response (tuple) in a html textarea

1 Answers1