Update html elements based on REST endpoint

Dash Python
1

I have a dash app that is also a flask app.
My html is general structure is fixed, but the values depend on what I should get from the REST endpoint.
I’ve read I can’t access the DOM from the REST endpoint, and I should be using some intermediate connector mechanism.
I’ve been thinking about doing it using a json file - writing a json file in the REST endpoint and reading it in the @callback part of the dash app.
I couldn’t find any way of relying on the json file changes to update my DOM.
I could maybe do it using the Store.
Any ideas will be greatly appreciated.

2

Hello @tal_dru,

Welcome to the community!

You should check out dash_clientside.set_props in order to insert/update data in the Dash Eco-System. This should help you when updating data from the fetch requests.

3

Thanks for the tip. I can’t find any usage examples for that outside of a javascript callback. Do you maybe know of such examples? Gemini and chatGPT wouldn’t provide a valid exmaple either

4

Check here and scroll down to set_props.

5

Thanks for the quick answer. This is still client side rendering. If I understand the example, it utilizes a pre existing csv file. My situation is that I start the dash server and the flask roughly the same time. And that i would like to update the html based on data received from the REST request. I didn’t quite manage to get that. Can you maybe help?

6

I have this setup on my server, as well as using a fastAPI.

If you can give an example of what you have, and what you’d want to do, I should be able to help then.

7

Thank you for your patience and you help!
This is my problem statement.
Given the following html for dash:
input_dict = {
“1”: {
“a”: “5”,
“b”: “15”,
“c”: “15”,
“d”: “15”,
“e”: “0.5”,
“f”: “false”,
“g”: “0.5”,
“h”: “false”,
“g”: “false”,
“h”: “1.67”,
“i”: “0.5”,
“j”: “false”
},
“2”: {
“a”: “5”,
“b”: “15”,
“c”: “15”,
“d”: “15”,
“e”: “0.5”,
“f”: “false”,
“g”: “0.5”,
“h”: “false”,
“g”: “false”,
“h”: “1.67”,
“i”: “0.5”,
“j”: “false”
}
}

rows = list(input_dict.keys())

server = Flask(name)
app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

app.layout = html.Div([…based on rows.])

I have the following REST endpoint.
I want this endpoint to updat the html layout based on the rows.

@app.server.route(‘/path/sendParams’, methods=[‘POST’])
def send_params():
json_data = request.get_json()
with open(“my_File.json”, “w”) as file:
json.dump(json_data, file, indent=4)

return jsonify({}

I hope this clarifies my use case