javascript - Flask socketio | Emitting a pandas dataframe from a background task using Flask executor to an Html script

Question

The code is designed to generate a dataframe using a background task. Once the background task is completed, the results from the dataframe is emitted to an html script using flask-socketio. A user can click a button to toggle the text.

Python script:

from flask import Flask, render_template, request
import pandas as pd
from flask_executor import Executor
from flask_socketio import SocketIO, emit
import json

app = Flask(__name__)
socketio = SocketIO(app)


@socketio.on("response")
def background_task_func():
    data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}  

    desired_output={"objects":[
        {"Name":"Tom","Age":20},
        {"Name":"Joseph","Age":21},
        {"Name":"krish","Age":19},
        {"Name":"John","Age":18},
        
       ]}
    data_2= pd.DataFrame(data)
    
    df_json=data_2.to_json(orient='records')
    results = {"objects":df_json}
    socketio.emit('response_output',desired_output, broadcast=True)
    
@app.route('/', methods=['GET'])
def index():

    executor.submit(background_task_func)   
    return render_template('views/index_img_soc4.html')



if __name__ == "__main__":  
    executor = Executor(app)
    socketio.run(app)

Variable desired_output is a test dict, which successfully displays in the html script below.

The html script is following:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style>
    #bargraph ={display:none;}
</style>

<button id="button_demo" class="w3-button w3-white w3-small w3-border w3-border-green w3-round-large" onclick="myFunctionChart()">View Chart</button>
<div id="testmesg"><span id="myText"></span></div>
<div id="myData"></div>
<div class="chart" id="bargraph">
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
        <script type="text/javascript" charset="utf-8">
            
            var socket = io().connect('http://127.0.0.1:5000');
            socket.emit('response')
            var str_;
            socket.on('response_output', function(obj) {
            str_ ="Hello";
            var html = "";
            for (var i=0; i < obj.objects.length; i++) {

                html += "<p>" + obj.objects[i].Name + obj.objects[i].Age  + "</p>";
        
                }
        
            document.getElementById("myData").innerHTML = html;
            
                });
 
        </script>
</div>



<script>
    function myFunctionChart() {
      var x = document.getElementById("testmesg");
      if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("myText").innerHTML=str_;
      } else {
        x.style.display = "none";
      }
    }
</script>

I would like to convert the dataframe data_2 to same structure as variable desired_output.

Below is a snippet of the code which can be used to view the outputs of the dataframe and to view the expected outputs' structure (i.e. variable desired_output). The input is called data which is a dict. This is converted to a dataframe called data_2. The output of df_json is a string and not a dictionary. Therefore my final output is called results which is a dict of string {"objects":'[ {"Name":"Tom","Age":20}, {"Name":"Joseph","Age":21}, {"Name":"krish","Age":19}, {"Name":"John","Age":18} ]'} .

How can I rectify this to output {"objects":[ {"Name":"Tom","Age":20}, {"Name":"Joseph","Age":21}, {"Name":"krish","Age":19}, {"Name":"John","Age":18} ]}?

import pandas as pd
import json

data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]} 

desired_output = {"objects":[
        {"Name":"Tom","Age":20},
        {"Name":"Joseph","Age":21},
        {"Name":"krish","Age":19},
        {"Name":"John","Age":18},
        
       ]}
data_2= pd.DataFrame(data)
df_json=data_2.to_json(orient='records')
result = {"objects":df_json}

Answer 1

You need to parse the json string to an object

result = {"objects": json.loads(df_json)}