Append to a json list stored in a hidden div?


I used the hidden div strategy so callbacks could share a list, instead of having that list be global. Everything works great for that, but now I have a callback from user input that needs to append a record to that list sitting in the hidden div.

So the div holding the list has to be both an input and an output (input to read in old list, output to store the old list after we add the record to it). And this gets me into a kind of circular situation where the dash won’t even load.

Any suggestions? (would prefer not to resort to the ‘store list on disk’ method)

Thanks, Nathan


Could you create a really small but reproducable example that demonstrates what you are trying right now?


It’s hard to pull out a small reproducible example bc it’s a complex front end with object names that have some proprietary references.

Basically it’s just like you example here:

except, instead of filtering down in update_graph, we would add a record to the df based on a input box entry, for example. And they can keep adding records to the df by doing this repeatedly (entering items into input box repeatedly)

So you can see the only input to your example’s intermediate callback is the drop down, but I need to also have an input to intermediate callback be an updated dataframe unique to that session with all the new records that were previously added.


Using filesystem cache working seems to be working for me. I can have essentially global cars unique per session.


Actually this isn’t working bc that cache stuff isn’t real global vars, it just simulates global var, sometimes.

Still looking for suggestions for this simple and common task.


for example, each browser session has its own list; when a user clicks a button it adds datetime to that user’s list. the cache method does not work; it’s combing the inputs from each session into the same list so each time any user clicks their button they get a list of all the timestamps, even the ones from the other user’s session’s clicks


Hello anyone looking or a solution to a similar issue, here is what I did:

Create a sessionId list as a global var.
Create a hidden div to store local session id as int in browser memory.
When a user loads the dash, a new key is incremented in the global session list and that same key is stored in their browser memory in the hidden DIV.
All global variables are converted to dictionaries with the sessionId as a key
Global variables are used by all sessions at the same time by referencing the sessionId key

So far it’s working perfectly.


It seems to me like one simple way to accomplish your original task was to pass your hidden json as a State parameter to the callback.