Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Displaying a list of dictionaries from a FastAPI endpoint #1159

Answered by fsmosca
yttcs asked this question in Question
Discussion options

  1. I have a FastAPI endpoint that returns a list of dictionaries from a remote database,

@router.get("/customers/")
async def read_customers(*,session: Session = Depends(get_session)):
customers = session.query(Customers).all()
return customers

output: [{"customerName":"Signal Gift Stores","customerNumber":112}, ...]

  1. I just want to iterate through the list and display it in a frontend. Is there a straigt forward way to do this in reactpy?

Thanks.
You must be logged in to vote

One way is convert that list of dict to a pandas dataframe then dataframe to reactpy vdom using html_to_vdom function.

In one of my reactpy explorations blog, I created a component that converts a dataframe to a vdom.

Dataframe to VDOM

@component
def DataframeToVdom(df):
 """Converts a pandas dataframe into ReactPy VDOM."""
 height = 400
 html_rec = df.to_html(
 index=False,
 border=0,
 justify='center',
 classes=['table', 'text-nowrap', 'table-bordered',
 'text-center', 'table-striped', 'table-hover',
 'table-primary']
 )
 return html.div(
 html.style(f"""
 .table-fix-head {{
 overflow-y: ...

Replies: 3 comments

Comment options

One way is convert that list of dict to a pandas dataframe then dataframe to reactpy vdom using html_to_vdom function.

In one of my reactpy explorations blog, I created a component that converts a dataframe to a vdom.

Dataframe to VDOM

@component
def DataframeToVdom(df):
 """Converts a pandas dataframe into ReactPy VDOM."""
 height = 400
 html_rec = df.to_html(
 index=False,
 border=0,
 justify='center',
 classes=['table', 'text-nowrap', 'table-bordered',
 'text-center', 'table-striped', 'table-hover',
 'table-primary']
 )
 return html.div(
 html.style(f"""
 .table-fix-head {{
 overflow-y: auto;
 height: {height}px;
 }}
 .table-fix-head table {{
 border-collapse: collapse;
 width: 100%;
 }}
 .table-fix-head th,
 .table-fix-head td {{
 padding: 8px 16px;
 }}
 .table-fix-head th {{
 position: sticky;
 top: 0;
 background: #97BDC4;
 }}
 """),
 html.div(
 {'class': 'table-fix-head'},
 utils.html_to_vdom(html_rec)
 )
 )

Full sample code

main.py

"""Displays a dataframe to vdom html table

Dependencies:
 pip install reactpy
 pip install fastapi
 pip install pandas
"""
from reactpy import component, html, utils
from reactpy.backend.fastapi import configure, Options
from fastapi import FastAPI
import pandas as pd
BOOTSTRAP_CSS = {
 'rel': 'stylesheet',
 'href': 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/'
 'dist/css/bootstrap.min.css',
 'integrity': 'sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80'
 'zW1RWuH61DGLwZJEdK2Kadq2F9CUG65',
 'crossorigin': 'anonymous'
 }
def read_customers():
 return [
 {"customerName":"Signal Gift Stores","customerNumber":112},
 {"customerName":"MMM ZZZ","customerNumber":100},
 {"customerName":"BBB 451","customerNumber":250},
 {"customerName":"VGR SQR","customerNumber":600},
 {"customerName":"KKK RRR","customerNumber":120},
 {"customerName":"BBB DGD","customerNumber":140},
 {"customerName":"YYY BNB","customerNumber":130},
 {"customerName":"WWW XXX","customerNumber":126},
 {"customerName":"UUU MMM","customerNumber":142}
 ]
@component
def DataframeToVdom(df):
 """Converts a pandas dataframe into ReactPy VDOM."""
 height = 400
 html_rec = df.to_html(
 index=False,
 border=0,
 justify='center',
 classes=['table', 'text-nowrap', 'table-bordered',
 'text-center', 'table-striped', 'table-hover',
 'table-primary']
 )
 return html.div(
 html.style(f"""
 .table-fix-head {{
 overflow-y: auto;
 height: {height}px;
 }}
 .table-fix-head table {{
 border-collapse: collapse;
 width: 100%;
 }}
 .table-fix-head th,
 .table-fix-head td {{
 padding: 8px 16px;
 }}
 .table-fix-head th {{
 position: sticky;
 top: 0;
 background: #97BDC4;
 }}
 """),
 html.div(
 {'class': 'table-fix-head'},
 utils.html_to_vdom(html_rec)
 )
 )
@component
def Root():
 df = pd.DataFrame(read_customers())
 return html.div(
 {'class': 'container mt-3 w-50'},
 DataframeToVdom(df)
 )
app = FastAPI()
configure(
 app,
 Root,
 options=Options(
 head=html.head(
 html.link(BOOTSTRAP_CSS)
 )
 )
)

Command line

uvicorn main:app

Output

image

You must be logged in to vote
0 replies
Answer selected by Archmonger
Comment options

The other approach is to build a table using that list of dict as input.

Here is a sample Table component that will take a list of dict as input.

@component
def Table(data: list[dict]):
 """Generates table from a list of dict.

 data = [{'u1': 'aaa', 'f1': 'bbb'}, {'u1': 'sss', 'f1': 'bnb'}]
 """
 header = list(data[0].keys())
 values = [list(d.values()) for d in data]
 thead_tr = []
 for row in [header]:
 thead_tr.append(html.tr([html.th(col) for col in row]))
 tbody_tr = []
 for row in values:
 tbody_tr.append(html.tr([html.td(col) for col in row]))
 return html.div(
 html.div(
 html.table(
 html.thead(*thead_tr),
 html.tbody(*tbody_tr)
 )
 )
 )

And call that table in the Root.

@component
def Root():
 data = read_customers()
 return html.div(
 html.style(
 """
 .content {
 max-width: 500px;
 margin: auto;
 }
 table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 }
 """
 ),
 html.div(
 {'class': 'content'},
 Table(data)
 )
 )

Output

image

You must be logged in to vote
0 replies
Comment options

Another way is to convert the list of dict to an html list.

@component
def CustomerList(data: list[dict]):
 """Generates html list from a list of dict.

 data = [{'u1': 'aaa', 'f1': 'bbb'}, {'u1': 'sss', 'f1': 'bnb'}]
 """
 ul = []
 for row in data:
 ul.append(html.li({'class': 'list-group-item'}, f"{str(row).replace('{', '').replace('}', '')}"))
 return html.div(
 html.ul(
 {'class': 'list-group list-group-numbered'},
 *ul
 )
 )
@component
def Root():
 data = read_customers()
 return html.div(
 {'class': 'container'},
 html.div(
 html.h2('Customers list'),
 CustomerList(data)
 )
 )

Output

image

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants

AltStyle によって変換されたページ (->オリジナル) /