I am trying to figure out how to store my data that I get from calling an API in hidden Divs. The data all needs to be loaded at once but the number of objects that will be returned will change, so I am populating a dictionary with the Jsoniefied dataframes, with the keys as a dropdown and want to store it in a hidden div, and let the user choose which data to display.
I have gotten this to work with single dataframes - but cant seem to get it to work with a dictionary - the server will start but I will get a “Error loading layout” message when I go the address, and a “Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)” in the console.
Below is an example where I am trying to populate a range slider where data_dict is a dictionary of jsoniefied dataframes.
from helper_functions import data_dict keys = list(data_dict.keys()) df = data_dict[keys[0]] app = dash.Dash() app.layout = html.Div( children = [ html.Div([ html.Div(id = 'date_selector'), ]), html.Div( id = 'data', children = [data_dict], style = {'display': 'none'} ) ] ) @app.callback( dd.Output('date_selector', 'children'), [dd.Input('data','children')] ) def update_date_range_slider(data): df = data[keys[0]] times = pd.date_range(start= df.index.min().date(), end= df.index.max().date() + datetime.timedelta(days=1)).tolist() marksdict = {} for t in times: marksdict[int(time.mktime(t.timetuple()))] = time.strftime('%d %b %Y') slider = dcc.RangeSlider( min = min(list(marksdict.keys())), max = max(list(marksdict.keys())), marks = marksdict, values = [min(list(marksdict.keys())), max(list(marksdict.keys()))] ) return slider if __name__ == '__main__': app.run_server(debug=True) Any help here would be greatly appreciated.
Thanks
UPDATE:
Found a more detailed error message:
bundle.js:2 Error: component.type is undefined at s (bundle.js:14) at Array.map (<anonymous>) at s (bundle.js:14) at Array.map (<anonymous>) at s (bundle.js:14) at e.value (bundle.js:14) at p._renderValidatedComponentWithoutOwnerOrContext (react-dom.min.js:13) at p._renderValidatedComponent (react-dom.min.js:13) at performInitialMount (react-dom.min.js:13) at p.mountComponent (react-dom.min.js:13)