将JSON从Flask模板传递到HTML再到静态JS脚本时出现问题

Question

我有一个JSON数据数组，我想从Flask模板传递到HTML到静态JS脚本，以实现d3.js可视化。根据这篇文章，我将其设置为以下内容：

烧瓶（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);

但是，这将返回未捕获的SyntaxError:控制台中JSON中位置0处的意外标记u。

我的直觉是，问题发生在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}}'>