Flask socketio |使用Flask executor从后台任务向Html脚本发送数据帧

Question

该代码旨在使用后台任务生成数据帧。后台任务完成后，使用flask socketio将数据帧的结果发送到html脚本。用户可以单击按钮切换文本

Python脚本：

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)

变量desired_output是一个测试dict，它成功地显示在下面的html脚本中

html脚本如下所示：

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

我想将数据帧数据_2转换为与所需变量_输出相同的结构

下面是代码片段，可用于查看数据帧的输出和预期输出的结构（即变量预期输出）。 输入被称为数据，它是一个dict。它被转换成一个称为data_2的数据帧。df_json的输出是一个字符串，而不是一个字典。因此，我的最终输出称为results，它是字符串{"objects":'[ {"Name":"Tom","Age":20}, {"Name":"Joseph","Age":21}, {"Name":"krish","Age":19}, {"Name":"John","Age":18} ]'}的dict

如何将其更正为输出{"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

您需要将json字符串解析为一个对象

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