[FIXED] Flask multiple variables called by JS

Issue

In Flask I have a route

@app.route('/get_plots/<ticker>')
def route_get_plots(ticker):
    plot1, plot2 = get_plots(ticker)
    return plot1, plot2

which is returning two json variables plot1 and plot2.

In my HTML I use Javascript to update the variables

// On Update
ticker_select.onchange = function() {
    ticker = ticker_select.value;          
    fetch('/get_plots/'+ticker).then(response => response.json()).then((responseJSON) => {
       var plot1 = responseJSON;
       Plotly.react('chart1',plot1, {});
       })
};

where resonseJSON seem to fetch only the first variable (plot1), but how can I access the second variable (plot2), too? Multi Variable Assignment like python var plot1, plot2 = responseJSON; does not seem to work.

Or would it make more sense to combine them in my app.route into one json object?

Solution

Try with:

return {'plot1': plot1, 'plot2': plot2}

Later versions of flask automatically convert a returned dictionary to JSON.

Then in your javascript:

var plot1 = responseJSON['plot1'];
var plot2 = responseJSON['plot2'];

Answered By - v25