How to render a list returned from callback output

Dash Python
1

Callback Output returns a list of strings. The question is how to render each element of the list in a different row, for example in dbc.Card:

dbc.Card(
    dbc.ListGroup(
        [
            dbc.ListGroupItem("Item 1"),
            dbc.ListGroupItem("Item 2"),
            dbc.ListGroupItem("Item 3"),
        ],
        flush=True,
    ),
    style={"width": "18rem"},
)

The callback looks like this one:

@app.callback(
    Output('hover-data', 'children'),
    Input('crossfilter-teams-scatter', 'hoverData'))
def display_hover_data(hoverData):
	t1 = hoverData.get('points')[0].get('hovertext')
	t1 = t1.split(',')
	
	return t1
2

What is the object type with id of “hover-data” in your app layout? You’re currently targeting the children property of that UI element and passing in a list from the callback function as output. Not sure if that UI element takes a list as its children.

3

I’d be happy if you could suggest a UI element that takes a list from the callback.

4

Can you elaborate a little further what you’re trying to accomplish overall? It’s a little difficult to provide specific solution(s) without knowing what you’re implementing.

5

Okay. thank you

the callback returns a list of strings
[line1, line2].

I would like that the UI element will present one line and then the other one bellow it. something simple like:

line 1: aaaaaa bbbbb ccccc
line 2: ddddd eee fffff

6

I’m still not clear what you’re trying to implement but here is a trivial implementation that shows how to target a dbc.Card (or sub-items inside it). Click the button to see how the text changes using a list in the callback:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash_html_components.Br import Br
from dash import no_update

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dbc.Card(id="my_card", 
                children=[dbc.CardBody([
                                            html.H4("Card title", className="card-title"),
                                            html.P(
                                                "Some quick example text to build on the card title and "
                                                "make up the bulk of the card's content.",
                                                className="card-text",
                                                )
                                        ], id="my_card_body")
                        ]),
        dbc.Button("Click", id="my_button")
        
    ]
)

@app.callback(
    Output('my_card_body','children'),
    Input('my_button','n_clicks')
)

def update_card_body(n_clicks):
    if n_clicks is None:
        return no_update
    my_list = ["hello", "hi", "bye"]
    new_card_content = [html.Li(x) for x in my_list]
    
    new_card_body = [
        html.H4("Card title", className="card-title")] + new_card_content
    return new_card_body


if __name__=="__main__":
    app.run_server(debug=True)
1 Like
7

Thank you very much, that did the trick for me