I am unable to return my python dictionary created in my Flask Server to my Javascript HTML Page

Question

I'm trying to build a REST api using a flask back-end which can be called using an AJAX call from my index.html page. This back-end server takes in parameters from my index.html page, computes values based on them and then returns the result so that it can be plotted on my index.html page.

I've been able to pass values back only when I am using a single variable (Eg. alphaValues) which is then JSONified and returned.

@app.route('/api', methods=['GET', 'POST'])
//Thi
@cross_origin()
def main_interface():
    if request.method == 'POST':
        data = request.get_json()

        parameters = {
            'local_pool_size': data["local_pool_size"],
            'plots': int(data["plots"]),
            'soil_effect': data["soil_effect"]=='true'
        }

        \\I then pass these parameters into another function to obtain an ordered dictionary of values to be plotted onto a graph.
        valueDict = get_plotting_variable(parameters)
        \\I first convert the elements in my original ordered dictionary to 
        dictionaries by accessing their key pairs
        alphaValues = dict(valueDict["alpha_mean"])
        alphaStd = dict(valueDict["alpha_std"])
        betaValues = dict(valueDict["beta"])
        pairWiseBeta = dict(valueDict["pairwise_beta"])

        \\I then assign these to a larger dictionary
        values = {"alphaValues":alphaValues,"betaValues": betaValues, "Std": alphaStd, "Pairwise_Beta": pairWiseBeta}

         \\Lastly, I then return these to my original function

         return jsonify(values)

and this is my AJAX call

$.ajax({
            type: "POST",
            url: "http://127.0.0.1:5000/api",
            data: JSON.stringify(values),
            dataType: 'json',
      contentType: 'application/json',
      success: function(data){
        var result = JSON.parse(data)
        console.log(result)
        generateGraph(data)
      },
      error: function(){
        console.log("AJAX call was not succesful")
      }
    })

I expect to get the dictionary of values produced in my flask back-end returned to my AJAX and logged in but I keep getting the notice that my AJAX call is not successful instead. Any help with this would be great.

EDIT: AS suggested by @tech at the spark foundation, I've modified my AJAX call to

error: function(xhr, textStatus, error){
        console.log(xhr.statusText);
        console.log(textStatus);
        console.log(error);
      }

This in turn gives me

OK
parsererror
SyntaxError: Unexpected token N in JSON at position 24
    at parse (<anonymous>)
    at Nb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Here is the Python Dictionary Generated

{'alphaValues': 
{5: [0.0, 2.725, 3.025, 3.075, 3.225, 3.3, 3.325, 3.35, 3.325, 3.375, 3.375, 3.45, 3.45, 3.475, 3.525, 3.6, 3.65, 3.65, 3.675, 3.725, 3.725, 3.8, 3.9, 3.9, 3.9, 3.95, 3.875, 3.85, 3.9, 3.95, 3.975, 3.975, 4.0, 4.0, 4.0], 
10: [0.0, 3.9, 4.7, 5.225, 5.275, 5.375, 5.4, 5.45, 5.475, 5.6, 5.625, 5.675, 5.775, 5.875, 5.85, 5.95, 5.9, 5.9, 5.925, 5.9, 6.0, 6.1, 6.2, 6.275, 6.275, 6.35, 6.45, 6.45, 6.45, 6.45, 6.5, 6.5, 6.6, 6.575, 6.6]},

 'betaValues': 
  {5: [nan, 20.550458715596328, 20.49586776859504, 21.13821138211382, 20.77519379844961, 20.90909090909091, 20.751879699248118, 20.597014925373134, 20.751879699248118, 20.74074074074074, 20.74074074074074, 20.289855072463766, 20.289855072463766, 20.14388489208633, 20.425531914893618, 20.0, 19.726027397260275, 19.726027397260275, 19.591836734693878, 19.328859060402685, 19.328859060402685, 19.210526315789476, 18.974358974358974, 18.974358974358974, 18.71794871794872, 18.734177215189874, 18.322580645161292, 18.7012987012987, 18.71794871794872, 18.734177215189874, 18.364779874213838, 18.364779874213838, 18.5, 18.5, 18.5], 
10: [nan, 13.58974358974359, 13.829787234042552, 13.397129186602871, 13.080568720379146, 13.209302325581396, 13.148148148148147, 13.394495412844035, 13.15068493150685, 12.857142857142858, 12.8, 12.863436123348018, 12.987012987012987, 12.936170212765957, 12.991452991452991, 13.109243697478991, 13.050847457627118, 13.220338983050846, 13.333333333333334, 12.88135593220339, 13.166666666666666, 13.114754098360656, 12.903225806451612, 13.227091633466134, 13.067729083665338, 12.755905511811024, 12.713178294573643, 12.713178294573643, 12.713178294573643, 12.55813953488372, 12.615384615384615, 12.923076923076923, 12.727272727272728, 12.623574144486692, 12.575757575757576]}, 

'Std': {
5: [0.0, 1.0951598056904754, 1.0121141239998581, 1.1042531412678886, 1.1288821904875637, 1.1445523142259597, 1.1042531412678886, 1.1302654555457317, 1.126665433924375, 1.1333026956643137, 1.1551515052147923, 1.16081867662439, 1.1390785749894519, 1.0951598056904754, 1.0720890821195783, 1.019803902718557, 0.9886859966642595, 0.9886859966642595, 0.9588404455382553, 0.9483538369195328, 0.9483538369195328, 0.9273618495495703, 0.8888194417315589, 0.8888194417315589, 0.8888194417315589, 0.8645808232895291, 0.9536115561380326, 0.9367496997597596, 0.9433981132056604, 0.804673846971554, 0.7901740314639554, 0.85110222652746, 0.8366600265340756, 0.8366600265340756, 0.8366600265340756], 
10: [0.0, 1.1789826122551597, 1.5198684153570663, 1.680587694825831, 1.4830289949963893, 1.460950033368698, 1.445683229480096, 1.413329402510257, 1.4315638302220408, 1.445683229480096, 1.4779631253857453, 1.5229494410518032, 1.5081031131855676, 1.5031217515557413, 1.5256146302392357, 1.5803480629279107, 1.5620499351813308, 1.5297058540778354, 1.5392774278862145, 1.5459624833740306, 1.61245154965971, 1.5132745950421556, 1.4352700094407325, 1.466074691139575, 1.4997916521970642, 1.5256146302392357, 1.448274835796024, 1.4654350889752845, 1.448274835796024, 1.4309088021254186, 1.466287829861518, 1.4317821063276353, 1.42828568570857, 1.464368464560747, 1.4966629547095764]
}, 

'Pairwise_Beta': {
5: [nan, 0.9685347985347992, 0.9705921855921865, 0.9712652625152634, 0.9719337606837615, 0.9725106837606844, 0.9725946275946282, 0.9728596866096871, 0.9725925925925928, 0.9727910052910055, 0.9727238502238506, 0.9731298331298334, 0.9734386446886449, 0.9730830280830283, 0.9741010378510381, 0.9741514041514042, 0.9738497150997155, 0.9735322547822552, 0.9731583231583237, 0.9732590557590561, 0.9732590557590561, 0.9736685999186003, 0.973365893365894, 0.973365893365894, 0.973009768009769, 0.9727823565323572, 0.9717353479853486, 0.9719357956857962, 0.9720573870573878, 0.9728266178266184, 0.9724893162393168, 0.9724145299145304, 0.9726373626373631, 0.9726373626373631, 0.9726373626373631], 
10: [nan, 0.9415123765123767, 0.9440232808502043, 0.9441587507933655, 0.9435878402224549, 0.9450385725385717, 0.9454057979057974, 0.9459681522181519, 0.9454410866910864, 0.9458243857282312, 0.9456121371505981, 0.9456204728320108, 0.9463243878628488, 0.9467223410492636, 0.9470962904616744, 0.947465358715358, 0.9471922628653389, 0.9467350277927197, 0.9466976435245661, 0.9455731999481994, 0.9468551279665526, 0.9471695428963522, 0.9469077071537472, 0.9474763476007815, 0.9473207304259337, 0.9460809102494618, 0.9465638982267934, 0.9466766095895043, 0.9461385685706941, 0.9454942840802562, 0.9453452529329218, 0.9458877664986253, 0.9462166963043653, 0.9463834810865348, 0.9462469829692677]
}}

Answer 1

Assuming that get_plotting_variable function is doing calculations using Pandas, The NaN values returned in Dataframe is not handled when the ajax receives the response and tries to parse it.

You need to replace NaN values with None which can be achieved using a single line

df1 = df.where((pd.notnull(df)), None)