Appending dbc object to a list

Dash Python
1

I’m trying to do this:

popoverBody=[]
for key in theText:
    popoverBody.append(dbc.ListGroupItemText(theText[key]))

…in order to create this:

html.Div([ 
        dbc.PopoverHeader("Header Text"),
        dbc.PopoverBody(popoverBody)
])

Not happening. When I investigate, I’m getting this:

print(popoverBody)
    [
        ListGroupItemText("Text 1"), 
        ListGroupItemText("Text 2"), 
        ListGroupItemText("Text 3"), 
        ListGroupItemText("Text 4")
    ]

…which list does NOT contain dbc.ListGroupItemText items.

It seems that pushing the dbc.ListGroupItemText object loses something when pushed to/read from a list (tried this with html.Li items w/same result, incidentally - the ‘html.’ is stripped away in the list).

Going the literal route doesn’t help, either:

for key in theText:
    popBody.append('dbc.ListGroupItemText("' + theText[key] + '"),')

print(popoverBody)
[
    'dbc.ListGroupItemText("Text 1")', 
    'dbc.ListGroupItemText("Text 2")', 
    'dbc.ListGroupItemText("Text 3")', 
    'dbc.ListGroupItemText("Text 4")'
]

Doing it manually works just fine…

html.Div([ 
        dbc.PopoverHeader("Header Text"),
        dbc.PopoverBody([
           dbc.ListGroupItemText("Text 1"),
           dbc.ListGroupItemText("Text 2"), 
           dbc.ListGroupItemText("Text 3"), 
           dbc.ListGroupItemText("Text 4")
        ])
])

Any ideas? Probably showing my ignorance of basic Python here so apologies in advance if so.

2

Hi @blah

I’m not sure that I follow the code you posted. If you post a complete minimal example – one that I can copy & paste and run to see the error – I think I might be able to help.

You can also see this post which adds a dbc component in a function:

1 Like
3

Hi AnnMarieW:

Apologies for the delay in replying. I should have answered you sooner, because in providing you with the minimal example, I find it works!

Here it is for the record. You’ll note, if you run it, that the results of the print(popoverBody) statement don’t include the “dbc.” prefix, so when testing it that way, I thought it was a failure. However, when implementing it, I see (again) that it works famously.

Thank you again as you have solved this problem too, albeit indirectly!

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__)

theText={
  "1":"Text1",
  "2":"Text2",
  "3":"Text3",
  "4":"Text4",
}

popoverBody=[]
for key in theText:
    popoverBody.append(dbc.ListGroupItemText(theText[key]))
    #check out results
    print(popoverBody)

app.layout = html.Div([
        #with automated content
        html.Div([
                dbc.PopoverHeader("Header Text"),
                dbc.PopoverBody(popoverBody)
        ]),

        html.Div([
                #with manual content
                dbc.PopoverHeader("Header Text"),
                dbc.PopoverBody([
                   dbc.ListGroupItemText("Text1"),
                   dbc.ListGroupItemText("Text2"),
                   dbc.ListGroupItemText("Text3"),
                   dbc.ListGroupItemText("Text4")
                ])
        ])

])

])

if __name__ == '__main__':
    app.run_server(debug=True)
4

Hey @blah Happy I could be your duck :grinning:

1 Like