I am trying to use a nested dictionary for chained callbacks. I am using the example of “Dash App With Chained Callbacks” from the link on Basic Callbacks | Dash for Python Documentation | Plotly, and want to add “district” as another level.
My app.py looks like:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
all_options = {
'America': {
'New York City' : ['a', 'b'],
'San Francisco' : ['c', 'd'],
'Cincinnati': ['e', 'f', 'g']
},
'Canada': {
'Toronto': ['h', 'i'],
'Ottawa': ['j', 'k']
},
}
app.layout = html.Div([
dcc.RadioItems(
id='countries-radio',
options=[{'label': k, 'value': k} for k in all_options.keys()],
value='America'
),
html.Hr(),
dcc.RadioItems(id='cities-radio'),
html.Hr(),
dcc.RadioItems(id='district-radio'),
html.Hr(),
html.Div(id='display-selected-values')
])
@app.callback(
Output('cities-radio', 'options'),
[Input('countries-radio', 'value')])
def set_cities_options(selected_country):
return [{'label': i, 'value': i} for i in all_options[selected_country]]
@app.callback(
Output('cities-radio', 'value'),
[Input('cities-radio', 'options')])
def set_cities_value(available_options):
return available_options[0]['value']
@app.callback(
Output('district-radio', 'options'),
[
Input('cities-radio', 'value'),
Input('countries-radio', 'value')
]
)
def set_district_options(selected_country, selected_city):
return [{'label': i, 'value': i} for i in all_options[selected_country][selected_city]]
@app.callback(
Output('district-radio', 'value'),
[Input('district-radio', 'options')])
def set_district_value(available_options):
return available_options[0]['value']
@app.callback(
Output('display-selected-values', 'children'),
[Input('countries-radio', 'value'),
Input('cities-radio', 'value'),
Input('district-radio', 'value')])
def set_display_children(selected_country, selected_city, selected_district):
return u'{} is a district in {} city of {}'.format(
selected_district, selected_city, selected_country,
)
if __name__ == '__main__':
app.run_server(debug=True)
I receive Callback error updating district-radio.options
and None
as the value for district. However, all_options[selected_country][selected_city]
e.g., all_options['America']['San Francisco']
returns ['c', 'd']
successfully, when I run it manually.
How can I properly iterate on this nested dictionary and make a chained callback?