将 JSON 从 Flask 模板传递到 HTML 到 Z84A8921B25F505D016D077AEB5DBBC4 的问题

Question

I have an array of JSON data that I want to pass from a Flask template to HTML to a static JS script for a d3.js visualization. 根据这篇文章，我将其设置如下：

在 Flask (routes.py) 中：

@app.route('/demo_statements')
def demo_statements():
    return render_template('tp_demo_statements.html', title='Statements Demo', data= 
  [{
    "tp_utt_a": "77",
    "tp_utt_c": "28",
    "tp_utt": "105",
    "tp_uttlen_a": "3.6",
    "tp_uttlen_c": "1.6",
    "tp_utt_metric": "2.0",
    "tp_utt_a_s": "78",
    "tp_utt_c_s": "25",
    "tp_utt_s": "103",
    "tp_uttlen_a_s": "3.7",
    "tp_uttlen_c_s": "1.9",
    "tp_utt_metric_s": "2.0",
  }]
)

在 HTML (tp_demo_statements.html) 中：

<div class="col-12" id="statements" data_dict='{{ data | tojson }}'>

和脚本：

<script type="text/javascript" src="{{ url_for('static', filename='js/statements.js') }}"></script>

在 JS (statements.js) 中：

var data_dict = JSON.parse(document.getElementById("statements").dataset.data_dict);

但是，这将返回Uncaught SyntaxError: Unexpected token u in JSON at position 0在控制台中。

我的直觉是问题发生在 HTML 和 JS 之间（即数据没有正确传递到 JS）。 当数据直接输入 JavaScript 文件时，可视化按预期加载，因此在下游绝对不是问题。 我尝试了其他排列来定义数据，例如：

var data_dict = document.getElementById("statements").dataset.data_dict;
var data_dict = JSON.parse($("#statements").data("data_dict"));
var data_dict = $("#statements").data("data_dict");

这些都不起作用？ 我究竟做错了什么？ 任何帮助将不胜感激！

Answer 1

也许这些更改可以帮助您。

@app.route('/demo_statements')
def demo_statements():
  data = [{
    "tp_utt_a": "77",
    "tp_utt_c": "28",
    "tp_utt": "105",
    "tp_uttlen_a": "3.6",
    "tp_uttlen_c": "1.6",
    "tp_utt_metric": "2.0",
    "tp_utt_a_s": "78",
    "tp_utt_c_s": "25",
    "tp_utt_s": "103",
    "tp_uttlen_a_s": "3.7",
    "tp_uttlen_c_s": "1.9",
    "tp_utt_metric_s": "2.0",
  }]
  graph_data = json.dumps(data, indent=2)
  data = {'graph_data': data}
  return render_template('tp_demo_statements.html', title='Statements Demo', data=data)

在您的 Html 中：

<div class="col-12" id="statements" data_dict='{{ data.graph_data | save}}'>