Use index number from a dropdown menu in a plotly-dash-callback

Dash Python
1

Hello everyone :slight_smile:

I want to use the index number from a dropdown-menu in a plotly-dash-callback, not the label. I have a df with a collumn of descriptive tables names. The df also contains table-IDs i have to use in a API call. I could use some look-up function to match the descriptive name and the ID. But I think it woud be too slow…? If I could just retrive an index number, I think, I could save computational time. Other suggestions are very welcome!

I extract a list from the table-df

df
df695Ă—524 57.7 KB 

list = df["Description"].tolist()

I use this list in a dropdown-menu in my dash-layout:

# =============================
# Layout
# =============================

layout = html.Div([
    dcc.Dropdown(id='table', options=[{'label': i, 'value': i} for i in list], value='Choose table'),
    html.Div(id='output')
])

I want to use the index number form the dropdown list to choose the table ID and use it in an API call. Here i just print the rustult.

# =============================
# Callbacks
# =============================
def callback(dashapp):
    @dashapp.callback(
        Output(component_id='output', component_property='children'),
        [Input(component_id='tabel_dst', component_property='value')]
    )
    def update_value(input_data):
        return 'Input: "{}"'.format(input_data)

Excercuting the dashbourd in debug gives me:

Dash_ex
Dash_ex991Ă—346 34.5 KB

I’m very open to other not-to-slow solution ideas :slight_smile:

Thank you for reading my question!

2

right now you are setting the “label” and the “value” to the same thing (“i”). instead, make them different things: whatever you set as value is what you’ll get in your callback, whatever you set as label is what you’ll see in the user interface.

1 Like
3

Ahh makes perfect sence!

I did it like this:

layout = html.Div([
    dcc.Dropdown(id='tabel_dst', options=[{'label': list[i], 'value': i} for i in range(len(list))], value='Choose table'),
    html.Div(id='output')
])