Passing values into dcc.dropdown

Dash Python
1

Greetings

I am trying to use a dictionary as labels and values in a dcc.dropdown component. My dictionary is something like this:

{1: 'Australian Grand Prix', 
2: 'Bahrain Grand Prix', 
3: 'Chinese Grand Prix', 
4: 'Azerbaijan Grand Prix',
 5: 'Spanish Grand Prix', 
6: 'Monaco Grand Prix', 
7: 'Canadian Grand Prix', 
8: 'French Grand Prix', 
9: 'Austrian Grand Prix', 
10: 'British Grand Prix'}

I am trying to use the keys of the dictionary as the values of the dropdown component, and values of the dictionary as labels. I am doing this, as the keys are more important to a callback I will write, than the race names(values of the dictionary)

I have tried the following code:

dcc.Dropdown(id = "rounds",
             options=[
             {'label': list(Laps.year_round_drivers(2019)["round"].values()),
              'value': list(Laps.year_round_drivers(2019)["round"].keys())} 
              ],
              value = Laps.round,
            multi = True)

Where, Laps.year_round_drivers(2019)["round"] is the dictionary described above.

The dash app starts up and the following error is thrown:

Invalid argument options[0].label passed into Dropdown with ID "rounds".

I have also tried:

                    dcc.Dropdown(id = "rounds",
                                 options=[
                                     {'label': Laps.year_round_drivers(2019)["round"][i],
                                     'value': i} for i in Laps.year_round_drivers(2019)["round"].keys()
                                    ],
                                    value = Laps.round,
                                    multi = True)

which throws the same error.

Any help would be appreciated. Thank you.

2

Hi @Suva1

The options of the dropdown has to have this format:

[{'label': 'Australian Grand Prix', 'value':1}, {'label': 'Bahrain Grand Prix', 'value':2}, {'label': 'Chinese Grand Prix', 'value':3}, {'label': 'Azerbaijan Grand Prix', 'value':4}, {'label': 'Spanish Grand Prix', 'value':5}, {...etc }]

then your option must be something like this:

options=[{'label': i, 'value': j} for i in  Laps.year_round_drivers(2019)["round"].values() and j in Laps.year_round_drivers(2019)["round"].keys()],
                                    value = 1,

I´m not sure about how to get the elements of i and j but the issue is to construct an option with the mentioned format.

1 Like
3

I usually do that when i have dictionaries:

di = {'my-label': 'my-value', ...}
dropdown = dcc.Dropdown(options=[{'label': k, 'value': v} for k, v in di.items()])

In this case you could try adapting:

di = {'my-label': 'my-value', ...}
dropdown = dcc.Dropdown(options=[{'label': v, 'value': k} for k, v in di.items()])
2 Likes
4

Hello @xhlu , Thank you for responding. I have tried your suggestion and it does not seem to work. I am tempted to just convert the dictionary to a list of tuples and try that method.

5

The solution was a standard list comprehension after changing the dictionary to a list of tuples and the value prop of the actual Dropdown component seems like it must contain a value from the dataset used in the “options” prop.

                    dcc.Dropdown(id = "rounds",
                                 options=[
                                     {'label': Laps.year_round_drivers(2019)["round"][j][1],
                                      'value': Laps.year_round_drivers(2019)["round"][j][0]
                                        } 
                                  for j in range(1, max(Laps.year_round_drivers(2019)["round"])[0])
                                    ],
                                    value = Laps.year_round_drivers(2019)["round"][1][0],
                                    multi = True)
6

I’m glad you were able to solve your use case.

I’m not sure why my approach didn’t work for you, but I did try with the dictionary you provided and it works fine:

tempgif

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

my_dict = {
    1: 'Australian Grand Prix',
    2: 'Bahrain Grand Prix',
    3: 'Chinese Grand Prix',
    4: 'Azerbaijan Grand Prix',
    5: 'Spanish Grand Prix',
    6: 'Monaco Grand Prix',
    7: 'Canadian Grand Prix',
    8: 'French Grand Prix',
    9: 'Austrian Grand Prix',
    10: 'British Grand Prix'
}

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': v, 'value': k}
            for k, v in my_dict.items()
        ]
    ),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'), Input('dropdown', 'value'))
def display_output(value):
    return f'You have selected "{value}"'


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

Thank you for trying this. It also works for me this time because I am using the value-prop of dropdown-component correctly (since I am choosing to use it), and assigning it to a value within the data that’s used in the options-props. I was just swinging for the fences, in ignorance, in the first post of this thread by not going through the documentation enough.

Again, thank you for your time.

1 Like
8

@Suva1 Makes sense! Thanks for clarifying.

For anyone reading this in the future, you can specify the default value by accessing the dictionary keys (a bit ugly due to how Python designed dictionaries):

    # ...
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': v, 'value': k}
            for k, v in my_dict.items()
        ],
        value=list(my_dict.keys())[0]
    )
2 Likes