使用外部js文件从flask获取json

Question

我有一个 flask 服务器吐出 json 数据从 pandas Z6A8064B5CDF4794555570055 转换而来

[{'name': 'FBtr0075557',
  'score': '164.00'},
 {'name': 'FBtr0075557',
  'score': '162.00'}]

我用来将 dataframe 转换为 json 的 python 代码是：

result = df.to_json(orient="records")
parsed = json.loads(result)
return render_template('mirtar.html', targets=json.dumps(parsed))

当我使用内部 javascript 时，数据被解析没有任何错误：

 <script type="text/javascript"> const targets = {{ targets|tojson }}; const entries = JSON.parse(targets); console.log(entries); </script>

但是，当我尝试使用外部 JS 脚本执行相同操作时，出现错误

Uncaught SyntaxError: Unexpected token { in JSON at position

据我了解，这条线

const targets = {{ targets|tojson }};

在外部 javascript 中的行为与内部不同，并且该行的第一个“{”被视为错误。 我确信这是一个非常基本的问题，并且必须有一种我肯定错过的简单方法。

Answer 1

Jinja syntax is only parsed in flask html templates, not externally loaded JS assets: because it's the python app doing the parsing, and in a deployed environment you'd typically serve static assets with a webserver like nginx.

对此进行排序的最快方法可能是使用此方法，您可以在 HTML 元素中使用数据属性。 这很感谢您将数据作为参数传递给模板render_template ，因此数据在页面加载时存在于模板中。

在您的情况下，这可能看起来像

<!-- a hidden tag -->
<input type='hidden' id='targetid' data-thetargets='{{ targets|tojson }}' />

然后在你的 javascript 中加载它：

var targets = JSON.parse(document.getElementById("targetid").dataset.thetargets);