Python Dash - Create multiple elements through for loop

Question

Let's say I have 10 records on my database and I want to render all of them in my Dash web app, is there a way where I can render all of them through a for loop? I've tried creating a function that renders the element but when I try to iterate through the records it only renders the first one.

x = ['Tom', 'Jerry', 'Math']

def createRegister(name):
    return dbc.Col([
       html.P(f"{name}")
    ])

app.layout = dbc.Container([
    dcc.Interval(id='interval_db', interval=86400000 * 7, n_intervals=0),
    dbc.Row([

    ], id='row-teste')
], fluid=True)

@app.callback(
    Output('row-teste', 'children'),
    [Input('interval_db', 'n_intervals')]
)

def p(n_intervals):
    for i in x:
        return createReg(i)

What am I doing wrong here?

score 0 · Answer 1 · answered Feb 22 '23 at 18:58

You could modify createRegister to take a list of records as the input, and return multiple html.P components using a list comprehension:

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc

# Initialize the dash app
app = dash.Dash()

x = ['Tom', 'Jerry', 'Math']

def createRegister(names):
    return dbc.Col([
       html.P(f"{name}") for name in names
    ])

app.layout = dbc.Container([
    dcc.Interval(id='interval_db', interval=1000, n_intervals=0),
    dbc.Row([

    ], id='row-teste')
], fluid=True)

@app.callback(
    Output('row-teste', 'children'),
    [Input('interval_db', 'n_intervals')]
)

def p(n_intervals):
    return createRegister(x)

app.run_server(debug=True)

Python Dash - Create multiple elements through for loop

1 Answers1