How to take the input of a dropdown from the value selected in another dropdown?

Dash Python
1

I want to make a dashboard where, say, in one dropdown I’ll have a list of fruits (say, Apple and Watermelon), and in the second dropdown I’ll have properties of the fruits that are displayed upon selection (say, Color and Size).

Now, the second dropdown is common to both fruits. But, the value displayed depends on what was selected in the first dropdown. For example, if Apple was selected in the first dropdown, then selecting Color on the second dropdown should display Red; if Watermelon was selected in the first dropdown, then selecting Color on the second dropdown should display Green. Similarly, if Apple is selected in the first dropdown, then selecting Size on the second dropdown should display Small; if Watermelon is selected in the first dropdown, then selecting Size on the second dropdown should display Big.

How do I do that?

This is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

fruitDict = {'Apple': {'Size':'Small', 'Color':'Red'}, 'Watermelon': {'Size':'Big', 'Color':'Green'}}

app.layout = html.Div(
    [
        html.Div([
            dcc.Dropdown(
                id='name-dropdown',
                options=[
                    {'label': 'Apple', 'value': 'Apple'},
                    {'label': 'Watermelon', 'value': 'Watermelon'},
                ],
                placeholder="Select a fruit...",
            ),
        ],style={'width': '20%', 'display': 'inline-block'}),
        html.Div([
            dcc.Dropdown(
                id='properties-dropdown',
                options=[
                    {'label': 'Size', 'value': 'Size'},
                    {'label': 'Color', 'value': 'Color'},
                ],
                placeholder="Select a fruit property...",
            ),
        ],style={'width': '20%', 'display': 'inline-block'}
        ),
        html.Hr(),
        html.Div(id='display-selected-values')
    ]
)

@app.callback(
    dash.dependencies.Output('properties-dropdown', 'options'),
    [dash.dependencies.Input('name-dropdown', 'value')]
)
def fruit_selection(name):
    return fruitDict[name]

@app.callback(
    dash.dependencies.Output('display-selected-values', 'children'),
    [dash.dependencies.Input('name-dropdown', 'value'),
    dash.dependencies.Input('properties-dropdown', 'value')])
def fruit_property_selection(fruit_value, fruit_property_value):
    if fruit_property_value=='Size':
        return '{} has a {} size.'.format(fruit_value, fruitDict[fruit_value][fruit_property_value])
    elif fruit_property_value=='Color':
        return '{} is {} in color.'.format(fruit_value, fruitDict[fruit_value][fruit_property_value])

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

But I get an error saying:

File "C:\Users\h473\Desktop\Fruit_Dashboard\ex.py", line 42, in fruit_selection
    return fruitDict[name]
KeyError: None

But if I type out fruit_selection('Watermelon') in the console, it returns {'Size': 'Big', 'Color': 'Green'} correctly. So, what’s wrong with the same in the dash app?

2

There is an example that is similar to this (cities and countries) in the user guide: http://dash.plot.ly/getting-started-part-2