Black Lives Matter. Please consider donating to Black Girls Code today.

Storing the json dumps to the hidden div

I am new to Dash, I am trying to share the variables between the callback states. So I referred the article Sharing Data Between Callbacks. I went through the article and seems storing the json dump data in a hidden div seems perfect. So I tried to implement the work,

app.layout = html.Div(
    html.Div(id='graph-1'),
    html.Div(id='graph-2'),
    html.Div(id='intermediate-data')
)

@app.callback(Output('intermediate-data'),[Input('user-id', 'children')])

def do_stuff(value):
     #did some stuff
     #returning data as json dumps and storing in hidden browser
     return json.dumps(json_info)

@app.callback(Output('graph-1'. 'children'), [Input('intermediate-data', 'children')])

def update_graph_1(jsonified_data):
       dataset = json.loads(jsonified_data)
       return '{}'.format(dataset)

Here in the above code, user_id represents the user unique_Id which is stored in hidden div in index.py. I am building multipage dash application. Now when I run this code and storing the JSON data as a dump in hidden div and try to retrieve that data using hidden div I get the following error

TypeError: the JSON object must be str, not ‘NoneType’.

When I reload the page, the app doesn’t go to the functiondo_stuff itself. It just simply returning None. I am retrieving the data from the cloud datastore which I wrote code in the function do_stuff. Seems when reloading the page, the app doesn’t go to this function itself.

When there is only one call back it’s working perfectly. But if there are multiple callbacks it shows the above error. How do I clear this error?

1 Like

I just released the dcc.Store, you can use it to store the data instead of an hidden div. Your update graph doesn’t check if jsonified_data is None, the first callback received is always None you can raise PreventUpdate if that is the case.

from dash.exceptions import PreventUpdate

...

if jsonified_data is None:
    raise PreventUpdate
3 Likes

Thanks @Philippe. Managed to resolve the issue in another way. Thanks for replying.

Hi @Philippe, thanks for that, spent a few hours getting my code to work and I think that’s the solution I was looking for. What does the first call back being a None do?

@blueboneseph
I’m not sure I understand your question. When the webpage loads for the first time, the callback usually returns a None value if you did not predetermine that value beforehand. That is why it’s best to “raise PreventUpdate” to avoid getting an error.