如何在一个 Flask 路由中返回一个对象和一个 html 文件？

Question

我写了一个名为“/mendonza_averages”的 Flask 路由，它查询数据库并返回字典。 然后，我在一个 html 文件中编写了一个 D3.js 脚本，以从 Flask 路由“/mendonza_averages”返回的字典中进行可视化。

我在同一个 Flask 路由中同时返回字典和 html 文件时遇到问题，我正在尝试这样做，因为我希望将该特定的 html 文件绑定到“/mendonza_averages”Flask 路由，而且我还需要字典来在 html 文件中进行可视化。

@app.route("/mendoza_averages")
def get_data ():    

    records = db.session.query(batting.playerid, batting.yearid, batting.h, 
batting.ab).filter(batting.yearid.between( "1974", "1982")).all()

    df = pd.DataFrame(records, columns=['playerid','yearid', 'h', 'ab'])
    years_1974_to_1982 = np.arange (1972, 1983)
    average_by_year = []
    for year in years_1974_to_1982:
        x = df[df["yearid"] == str (year)]
        try:
            y = sum (x ["h"]) /sum ( x["ab"])
        except ZeroDivisionError:
            continue
        average_by_year.append(y)

    mario_mendoza = df [df["playerid"]=="mendoma01"]
    mario_mendoza_avg = mario_mendoza["h"] / mario_mendoza["ab"] 
    mario_mendoza_avg = mario_mendoza_avg.values.tolist()

    mendoza_avg_vs_1974_to_1982 = {"mendonza_average":mario_mendoza_avg, 
"average_by_year_74_to_82":average_by_year}

    return  (mendoza_avg_vs_1974_to_1982)
    return render_template("mendoza_averages.html")

if __name__ == "__main__":
    app.run(debug=True) 

html 文件中的 D3.js 脚本如下所示：

<script>
  var url = "/mendoza_averages";
  function buildPlot() {
    d3.json(url).then(function (response) {
      // console.log(response);

      var array_lenght = response.length;

      function range(start, end) {
        var ans = [];
        for (let i = start; i <= end; i++) {
          ans.push(i);
        }
        return ans;
      };
      //console.log(range(0, 70));

      var data_dict = d3.map(response)

      console.log(Object.values(response.average_by_year_74_to_82));
      console.log(Object.values(response.mendonza_average));

      //console.log(Object.values(object1));

      var trace1 = {
        x: range(1974, 1982),
        y: (Object.values(response.average_by_year_74_to_82)),
        type: "scatter",
        name: 'MLB Average'
      };

      var trace2 = {
        x: range(1974, 1982),
        y: (Object.values(response.mendonza_average)),
        type: "scatter",
        name: 'Mendoza Average'
      };

      var data = [trace1, trace2]
      Plotly.newPlot('mendoza_avgs', data, {}, { showSendToCloud: true });

    }
    )
  };
  buildPlot()

</script>

谢谢！

Answer 1

您可以像这样通过render_template传递数据：

@app.route("/mendoza_averages")
def get_data ():
    ...
    return render_template("mendoza_averages.html", response=mendoza_avg_vs_1974_to_1982)

然后在你的脚本中，在不使用d3.json调用的情况下获取它：

<script>
function buildPlot() {
    const response = JSON.parse({{ response | tojson }});
    const array_lenght = response.length;
    ...
}
</script>