Populate dbc.CardDeck from the list

Dash Python
1

Hi,

Is it possible to populate a dbc.CardDeck from the list of items?
For example, i have cards defined as :

dog = dbc.Card([
dbc.CardHeader(html.H5("This is a dog", className="card-title"),),
dbc.CardBody(
        [
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Benefits:", className="card-title"),
            dbc.Nav([dbc.NavItem(dbc.NavLink("Go to another page", active=True, href="https://en.wikipedia.org/wiki/Dog"),) ],pills = True,) ,
        ] ),
 ],
    style={"width": "18rem"},
)


cat = dbc.Card([
dbc.CardHeader(html.H5("This is a cat", className="card-title")),
dbc.CardBody(
        [
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Benefits:", className="card-title"),
            dbc.Nav([dbc.NavItem(dbc.NavLink("Go to another page", active=True, href="https://en.wikipedia.org/wiki/Cat"),) ],pills = True,) ,
        ] ),
 ],
    style={"width": "18rem"},
)


bear = dbc.Card([
dbc.CardHeader(html.H5("This is a bear", className="card-title")),
dbc.CardBody(
        [
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Benefits:", className="card-title"),
            dbc.Nav([dbc.NavItem(dbc.NavLink("Go to another page", active=True, href="https://en.wikipedia.org/wiki/Bear"),) ],pills = True,) ,
        ] ),
 ],
    style={"width": "18rem"},
)
                
wolf = dbc.Card([
dbc.CardHeader(html.H5("This is a wolf", className="card-title")),
dbc.CardBody(
        [
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Some header:", className="card-title"),
            html.P( "Some text", className="card-text",),
            html.H6("Benefits:", className="card-title"),
            dbc.Nav([dbc.NavItem(dbc.NavLink("Go to another page", active=True, href="https://en.wikipedia.org/wiki/Wolf"),) ],pills = True,) ,
        ] ),
 ],
    style={"width": "18rem"},
)

And lists containing lists of animals/cards:

all = [cat, dog, wolf, bear]   
house = [cat, dog] 
wood = [wolf, bear]

Based on the Input , i would like to have a result like this:

app.layout = html.Div([
       dbc.InputGroup([
                dbc.Select(
                    id = 'select',
                    options=[
                        {"label": "All", "value": 'all'},
                        {"label": "House", "value": 'house'},
                        {"label": "Wood", "value": 'wood'},
                    ],
                    value = 'all',
                    style = {"marginLeft" : 100}),
                ]),      
       dbc.CardDeck(id="result"),               
])

@app.callback(    
    Output('result', 'children'),
    [Input('select', 'value')])

def animals_list (animal):
    animal = animal
    for i in animal:
        return dbc.CardDeck(i)

However, this only gives me the first card from the list.
p.s.
Writing an if/then statements and all the cards is not convenient because my actual layout has 5 dropdowns and my result has 405 combinations

Thank you in advance

2 
for i in animal:
    return dbc.CardDeck(i)

The return breaks you out of the for loop after the first iteration which is why you only see the first card. Instead I think you can just pass the full list to the card deck

return dbc.CardDeck(animal)
1 Like
3

Thank you, this works :slight_smile:

1 Like