Call-backs, multiple inputs and dictionaries

Dash Python
1

Hi, I’m totally stuck, i have read the docs on callbacks multiple times and watched various youtube videos. Although i understand it, putting into practice is extremely confusing.

I have a dictionary (which throws up an error - apparently its not closed) what i am trying to do is when the user selects a drop down, it populates a box with a key value associated with the state.

My first problem is the dictionary, I’m not sure why it has this error, and I’m unsure how to create a second input that will output the key from the dictionaries. Any help would be great. Thanks

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({'NYC': 56'MTL' 88 'SF': 34}, 'NYC', id='demo-dropdown'),
    html.Div(id='dd-output-container'
    )])




@app.callback(
    Output('dd-output-container', 'children'),
    Input('demo-dropdown', 'value'),
    
)
def update_output(value):
    return f'You have selected {value}'


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

Hello @FREDDY33,

You dictionary should look like this:

{'NYC': 56, 'MTL':88, 'SF': 34}

You were missing some commas and a colon.

With that configuration, you’ll be selecting numbers and outputting the letters. If you want it reversed, you need to swap places in the dictionary.

3

Hello @jinnyzor

Thank you, that was a silly mistake! after hours of trying i think lost all concentration lol. ok so that works great, as you mentioned i have switched the values. My next thing is a little challenging. I am trying to create a user input box below so the user can input a value. I have tried many variations but getting errors each time ( normally relating to the id and callbacks)

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({ 56:'NYC', 88: 'MTL', 34: 'SF'}, 'NYC', id='demo-dropdown'),
    html.Div(id='dd-output-container'
    )])

html.Br(),

html.Div([
        "Input: ",
        dcc.Input(id='user-input', value='initial value', type='value'),
        html.Div(id='dd-output-container2')
    
        ]),




@app.callback(
    Output('dd-output-container',  'children'),
    Output('dd-output-container2',  'children'),
    Input('demo-dropdown','value', ),
    Input('user-input',  'value', ),
    
)
def update_output(value):
    return f'Select a state to output a value {value}'


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

The below code works great:

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({ 56:'NYC', 88: 'MTL', 34: 'SF'}, 'NYC', id='demo-dropdown'),
    html.Div(id='dd-output-container'
    )])



@app.callback(
    Output('dd-output-container',  'children'),

    Input('demo-dropdown','value', ),

    
)
def update_output(value):
    return f'Select a state to output a value {value}'


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

working
working1147×579 16.3 KB

Any guidance on how to add another input, basically i will be using the value from the drop down and doing a calculation using the users input to produce an output.

i plan on making a map that can help people work out tax in the usa, so its to help others and use for my portfolio.

thank you

4

@FREDDY33,

The top callback has two outputs and two inputs. The function is only using one input and only returning one output.

Change the function to use two inputs and have it give two outputs.

Also, note that you can only have a callback for a specific id and prop once.

5

@jinnyzor ahh the function! of course. Thank you. I will give that a go now!

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({ 56:'NYC', 88: 'MTL', 34: 'SF'}, 'NYC', id='demo-dropdown'),
    html.Div(id='dd-output-container'
    )])

html.Br(),

html.Div([
        "Input: ",
        dcc.Input(id='user-input', value='initial value', type='value'),
        html.Div(id='dd-output-container2')
    
        ]),




@app.callback(
    Output('dd-output-container',  'children'),
    Output('dd-output-container2',  'children'),
    Input('demo-dropdown','value', ),
    Input('user-input',  'value', ),
    
)
def update_output(value, value1):
    return f'Select a state to output a value {value} {value1} ' 


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

This throws up id errors.

Do i need to make a separate function for the second input? I thought this would work because the arguments relate to which input or output is first then second no?

6

Your output still has just one output. To make it two, it will look something like this:

Return value, value1

7 
 return f'Select a state to output a value {value} {value1} '

it has two no?

8

Nope. Just one. You need a comma to break it outside of the string.

9 
def update_output(value, value1):
    return f'Select a state to output a value {value}, {value1} '

Capture
Capture1743×632 15.6 KB

looking at the error, it might be relating to what you said about only using one output. But i thought it would have called the output from the second div ottput?

“This ID was used in the callback(s) for Output(s):
dd-output-container.children, dd-output-container2.children”

10

Here is the adjustment that I got working:

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({56: 'NYC', 88: 'MTL', 34: 'SF'}, 56, id='demo-dropdown'),
    html.Div(id='dd-output-container'
             ),

html.Br(),

html.Div([
    "Input: ",
    dcc.Input(id='user-input', value='initial value', type='number'),
    html.Div(id='dd-output-container2')

]),

])


@app.callback(
    Output('dd-output-container', 'children'),
    Output('dd-output-container2', 'children'),
    Input('demo-dropdown', 'value'),
    Input('user-input', 'value'),

)
def update_output(value, value1):
    return f'Select a state to output a value {value}', f'You entered {value1}'


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

There were two things going on:
First - Your app layout div was ending after the dd-output-container, therefore the other inputs and outputs werent there.
Second - Your function wasnt returning two outputs.

11

Thank you so much, that makes a alot of sense now. I honestly really appreciate the time you take to help me.

so i see you have done this:

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown({56: 'NYC', 88: 'MTL', 34: 'SF'}, 56, id='demo-dropdown'),
    html.Div(id='dd-output-container'
             ),

html.Br(),

html.Div([
    "Input: ",
    dcc.Input(id='user-input', value='initial value', type='number'),
    html.Div(id='dd-output-container2')

]),

])

so basically i was closing the app layout and then adding a div in afterwards, that makes sense why the input button wasn’t even displaying. i did try this at one point, but my syntax wasn’t right.

I see the second thing you done was add:

return f'Select a state to output a value {value}', f'You entered {value1}'

so the f determines its a string, but how come we can use a number value in the input box as well?

This is a huge help, I’m slowly starting to get to grips with call-backs and how they operate.

12

I wasnt sure as to what value you wanted, as type=‘value’ was invalid.

13

Nono, its perfect. It accepts a number input. I think because on the docs it says , “value” can accept strings and numbers!