How to decode Complex data(in Vue js 3) encoded by jsonpickle(python flask)-CodePudding

I am using python Flask as Backend and vue 3 as frontend. I have ndarray of some complex number that I need to send to vue 3. json is not accepting Complex values so I tried jsonpickle method to encode it. I am able to receive Jsonpickle object to frontend side in axios response. Now My question is How to decode it in vuejs. Python Flask Code

app.route('/PlotST',methods=['POST','GET'])
@cross_origin(supports_credentials=True)
def PlotST():
                      
    STc_y=SW_SurfaceTension(T, TDS)               
    t = jsonpickle.encode(STc_y)
    plot_ST['STc_y']=t
    plot_ST['x_axis_value']=TDS.tolist()
    plot_ST['STc_label']='SW_SurfaceTension'   

    return make_response(jsonify(plot_ST), 200)

Vue 3 Code

  PlotST() {  
   axios.post('http://127.0.0.1:5000/PlotST',     {
       
      Fixed_Variable:this.inputes.Fixed_Variable,
      Fixed_Var_Value:this.inputes.Fixed_Var_Value,
      MinValue:this.inputes.MinValue,
      MaxValue:this.inputes.MaxValue,
      },)
     .then(response => {
        this.isModalVisible = true; /* Make chart pop up modal visible */      
        console.log(response);
        this.options ={ 
            xaxis: {
            categories : response.data.x_axis_value,
            title : { text : response.data.xlabel  } },
            yaxis: { title: {text:response.data.ylabel}},
            title: {
              text:response.data.title ,              
            }
        }      
        
        /* here how I can decode jsonpickle object recived in response from python Flask. */
        
        this.series[0].data =response.data.STc_y
        this.series[0].name =response.data.STc_label
       
               
        })
     .catch(error =>{
        console.log(error);
      });
  }

** In response section above how I can decode jsonpickle object so I can receive Complex data **

Below is the axios response I have received at vue js side.

data:
STc_label: "SW_SurfaceTension"
STc_y: "{\"py/reduce\": [{\"py/function\": \"numpy.core.multiarray._reconstruct\"}, {\"py/tuple\": [{\"py/type\": \"numpy.ndarray\"}, {\"py/tuple\": [0]}, {\"py/b64\": \"Yg==\"}]}, {\"py/tuple\": [1, {\"py/tuple\": [11]}, {\"py/reduce\": [{\"py/type\": \"numpy.dtype\"}, {\"py/tuple\": [\"c16\", false, true]}, {\"py/tuple\": [3, \"<\", null, null, null, -1, -1, 0]}]}, false, {\"py/b64\": \"YVAX7m81M8HeSy2SZ/IzwXt8pu5vNTPBcPjBkmfyM8GXqDXvbzUzwQOlVpNn8jPBstTE7281M8GWUeuTZ/Izwc4AVPBvNTPBKf5/lGfyM8HpLOPwbzUzwbyqFJVn8jPBBFly8W81M8FOV6mVZ/IzwR FAfJvNTPB4gM lmfyM8E5sZDybzUzwXSw0pZn8jPBVd0f8281M8EHXWeXZ/IzwW8Jr/NvNTPBmQn8l2fyM8E=\"}]}]}"
title: "Surface Tension vs. TDS at fixed Temperature = 42000°C"
x_axis_value: (11) [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38]
xlabel: "TDS [mg/L]"
ylabel: "Surface Tension  [mN/m]"

CodePudding user response：

Simple JSON.parse(STc_y) should work just fine

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

CodePudding user response：

You can use jsonify

exemple :

jsonify(username=g.user.username, email=g.user.email, id=g.user.id)

send :

{ "username": "admin", "email": "admin@localhost", "id": 42 }

Documentation : https://www.adamsmith.haus/python/docs/flask.jsonify

This article can be very helpful for you : https://medium.com/featurepreneur/connect-vuejs-with-flask-1316ea0afecf