Displaying a list of dictionaries from a FastAPI endpoint

[yttcs]

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}, ...]

2. 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.

[fsmosca]

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/[email protected]/'
                '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

[fsmosca]

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

[fsmosca]

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