Announcing Dash Bio 1.0.0 πŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

How upload Parameters from Json file to dash app

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

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?

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

@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.

Capture

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

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

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