Create Dynamic number of html.summary inside html.div using for loop

Dash Python
1

Hello All, I am creating a navigable dropdown tree where the data populates from JSON data. I am following this link.

Now, I want to create multiple html.summary inside html.div by iterating through lists from the JSON.

I tried this but got TypeError: Object of type 'generator' is not JSON serializable

html.Div(
      [
                                    html.Details(
                                        html.Summary(
                                            html.A(id=f"{portfolio}-link", children=[f"{portfolio}", html.I(className="far fa-arrow-alt-circle-right", id=f"{portfolio}-icon-1", style={'padding-left': '2px', 'color':'#C7C7C7'}),]),
                                        )for portfolio in portfolio_list
                                    ),
                                ],
                                style={'text-indent':'2em'}
                            )
2

This chunk

html.Details(
    html.Summary(...) for portfolio in portfolio_list
)

is creating a Python generator expression, see here for a bit of background on what they are. Crucially a generator expression is different to a list comprehension which is what I think you want instead. You should be able to fix it just by adding some square brackets

html.Details(
    [html.Summary(...) for portfolio in portfolio_list]
)
3

Thanks a lot! That works!

1 Like