✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Interval callback for dynamically updating single dropdown list

Hello, I have spent 2-3 weeks trying to do this and would very much appreciate some help as I’m really struggling to complete my task. I am creating a web app where I need to poll an API every second and dynamically update a drop down. I have this currently working to create a list of buttons dynamically however I need to transition this functionality to a dropdown (ore checklist) as I need multi-select functionality.

Working callback for button list where the function detect_drones() returns a 2d array with information on devices i.e
Devices = [[“Phone”, “Mac Address”], [“Phone”, “Mac Address”]]

app.layout = html.Div([
    html.Div([
        html.H1('Devices dentified'),
        html.Span(className='boxLine'),

        #Nav is used to create a scroll bar.
        html.Nav([
        html.Ul([
            html.Span(id='buttonCreation'),
        ])
       ])
    ], className='droneBox'),
    dcc.Interval(
        id='interval-component',
        interval=5000,
        n_intervals=0
    ),
])

#Callback to create a button on every detected device
@app.callback(
    dd.Output('buttonCreation', 'children'),
    [dd.Input('interval-component', 'n_intervals')]
)
def create_buttons(frame):
    buttons = []
    detected_devices = server_V_0_5.detect_devices()
    if len(detected_devices) == 0:
        return html.H2('No devices deteced.')
    else:
        for i, device in enumerate(detected_device):
            #If the name is empty
            if device[1] == "":
                device[1] = device[2]
            buttons.append(html.Button(f"{drone[1]}", id=f"D{i+1}")) 
    return buttons

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

Here is some idea from another post

app = dash.Dash()

app.layout = html.Div(
    [
        html.Div([
        dcc.Dropdown(
            id='name-dropdown',
            options=[{'label':name, 'value':name} for name in names],
            value = list(fnameDict.keys())[0]
            ),
            ],style={'width': '20%', 'display': 'inline-block'}),
        
        ),
    ]
)

@app.callback(
    dash.dependencies.Output('opt-dropdown', 'options'),
    [dash.dependencies.Input('name-dropdown', 'value')]
)
def update_date_dropdown(name):
    opts = fnameDict[name]
    options=[{'label':opt, 'value':opt} for opt in opts]
    return {'options':options}

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

Is there a way I can have a dropdown which using interval, dynamically adds elements to the dropdown based off a 2d array. Thank you, any help is much appreciated.

no one ?
bump

Hi @Pleasehelp and welcome to the Dash forum!

I might be able to help, but I don’t really understand your question. Would you be able to make a small working example with the button list and include some sample data? No need to include the interval for now. Then explain how you would like to see the data in the dropdown.

The next step would be to test with the interval and the real data. Note this also might be a good use case for pattern matching callbacks. Check it out here: https://dash.plotly.com/pattern-matching-callbacks