将 JSON 从 Flask 模板传递到 HTML 到静态 JS 脚本的问题答案

【问题标题】：Problems Passing JSON from Flask Template to HTML to Static JS Script将 JSON 从 Flask 模板传递到 HTML 到静态 JS 脚本的问题
【发布时间】：2020-11-28 17:43:37
【问题描述】：

我有一个 JSON 数据数组，我想将其从 Flask 模板传递到 HTML 到静态 JS 脚本，以实现 d3.js 可视化。基于this post，我设置如下：

在 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");

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

【问题讨论】：

在发送到模板的“数据”变量之前，您是否尝试过在数组上使用 json.dumps？
stackoverflow.com/questions/12435297/…@JoseMoreno 提到的有关 json.dumps 的更多信息
我尝试了 json.dumps 但似乎没有什么不同 - 我仍然遇到同样的错误！

标签： javascript python json flask d3.js

【解决方案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}}'>

【讨论】：

进行此更改后，出现调试错误：jinja2.exceptions.TemplateAssertionError: no filter named 'save'?
这个过滤器实际上被命名为“安全”而不是“保存”。