How upload Parameters from Json file to dash app

Dash Python
1

hi everyone i am a newbie in dash python and i will import parameters from a json file for my app.
Thanks for your help

2

Hi @Stan1, what kind of parameters are you referring to? A little bit of context would help others answer your question.

I have worked on a dash project where I have used a config json file for my Dash app to change the styling and colors on the fly. Do you have a similar use case in your app?

3

Thank you for your answer.
in fact I have an output graphic which reacts to input parameters.
now I want to be able to upload its parameters from a json file

4

@Stan1 if could you provide any minimal example it would be then easier to help you out.
I assume that you want to update your graph based on the parameters in your json file, you can just read the data from your json file before creating the graph that would pull the data from your json which you can then use it in your graph.

5

Capture

an example.
you see the parameters if below projectNumber ClientName, I would like to import them from a json file

6

As I said before you can read the contents of your json file and then use it in your app, on each run your app will read the updated data from your json file.

Here’s a MWE where I am reading the json file and then using the data below in my app layout

data.json file

{
  "projectNumber": 420,
  "clientName": "Snoopy"
}

app.py file

from dash import Dash, dcc, html
import json

# Reading json file
json_file_path = "assets/data.json"
with open(json_file_path) as f:
    data = json.load(f)

# Dash App
app = Dash(__name__)

# App layout
app.layout = html.Div(
    [
        html.P("Project Number:"),
        dcc.Input(value=data["projectNumber"]),
        html.P("Client Name:"),
        dcc.Input(value=data["clientName"]),
    ]
)

# Run Server
if __name__ == "__main__":
    app.run_server(debug=True)

Output
image

1 Like
7

Thank you for your answer which will be useful to me. But I see that in your case the json file is unique and local and imported directly into the code. I would like to give the possibility to the user to import himself his json file with an upload button
like that
I used the dcc.upload component like this:

dbc.Button(dcc.Upload('Drag and Drop', id='upload-data'))

Then I used a callback to process the uploaded file:

@app.callback(
       Output ('projectNumber', 'value')
       Output('clientName','value')
       Input('upload-data', 'contents'),
)
on_data_upload(contents):
        content_type, content_string = contents.split(',')
        decoded = base64.b64decode(content_string)
        data = json.loads(decoded)
        #process data
        return output

#But I don't know how to process my data
8

Did you find a solution for this, please? I am trying to parse a JSON file from the user

9

Hi,

Not sure if it is too late, but I have a working example that can help you. In this example, I can upload a plotly figure from json and regenerate the graph in the callback:

"""
Using upload to regenerate plotly figures from JSON
"""
import base64
import json

from dash import Dash, html, dcc, Input, Output, State, callback
from dash.exceptions import PreventUpdate

# Export plot as json
# data = px.scatter(px.data.iris(), x="sepal_length", y="petal_length", color="species").to_json()
# with open('data.json', 'w') as file:
#     file.write(data)

app = Dash(__name__)


app.layout = html.Div(
    [
        dcc.Upload(id="upload-data", children="Upload"),
        html.Div(id="output-data-upload"),
    ]
)


@callback(
    Output("output-data-upload", "children"),
    Input("upload-data", "contents"),
    State("upload-data", "filename"),
)
def on_data_upload(contents, filename):
    if contents is None:
        raise PreventUpdate

    if not filename.endswith(".json"):
        return "Please upload a file with the .json extension"

    content_type, content_string = contents.split(",")
    decoded = base64.b64decode(content_string)
    
    # this is a dict!
    content_dict = json.loads(decoded)

    return dcc.Graph(figure=content_dict)


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

Note that up to content_dict the code is quite generic and can be reused for different contexts.

To test it, it is enough to export a go.Figure object to a json file, as done in the code comment.

Hope this helps! :slight_smile:

1 Like