在JavaScript脚本标记中使用jinja2（带flask）呈现数据

如问题所述，我只想将列表的结果（从flask项目中的main.py文件传递）传递并呈现到html模板（charts.html）。问题是我试图将jinja变量或使用jinja放在脚本标记（JavaScript）中，而不是html中。我找不到任何文档或答案可以告诉我如何做到这一点：

<!-- This SET is just to illustrate an example data source, the data would probably come from you controller -->
{% set enrolled_data = '[3,200,600,1800,22000]' %}

<!-- place a hidden field somewhere in your template to "hold" your data -->
<input type="hidden"  id="enrolled_id" value="{{ enrolled_data }}">

<!-- Now Javascript can look for the hidden field and get the data out of it -->
<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    document.querySelector('#enrolled_id').value
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>

我的代码：charts.html（烧瓶中的模板）

我想显示的是注册的内容，而不是脚本标记中的现有列表

因此，将脚本标记中的[15,222,4,2,0]替换为注册的内容

我试过各种方法，但都不管用

例如，我尝试将jinja变量放入列表中，该列表呈现如下所示

<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [{{enrolled}}]
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>

风险值数据={
标签：[“周一”、“周二”、“周三”、“周四”、“周五”]，
系列：[
[{{注册}}]
]
};
新图表列表线（“.ct图表”，数据）//这条线创建图表

这不管用

在尝试使用JavaScript内部的jinja2将数据呈现到html页面时，有人能提供一个解释最佳实践的解决方案吗？在本例中，使用chartist.js列出图表的数据

更新：

我还研究了一个涉及使用jquery和ajax来呈现结果的解决方案（根本没有使用jinja2），但这对于我试图实现的目标来说似乎过于复杂

---

请在您的回答中提出最佳的解决方案/备选方案，但我的主要问题是，使用jinja2是否可以轻松实现这一点

我尝试了您的代码，只需将

[{{{registered}}]

替换为

{registered}

我知道这是一个相对古老的问题，但由于我需要实现与@misscuting类似的功能，我将分享我发现的这个解决方案。虽然不漂亮，但它确实有用

因此，在您的情况下，您需要这样做：

<!-- This SET is just to illustrate an example data source, the data would probably come from you controller -->
{% set enrolled_data = '[3,200,600,1800,22000]' %}

<!-- place a hidden field somewhere in your template to "hold" your data -->
<input type="hidden"  id="enrolled_id" value="{{ enrolled_data }}">

<!-- Now Javascript can look for the hidden field and get the data out of it -->
<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    document.querySelector('#enrolled_id').value
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>

{%set登记的_数据='[3200600180022000]'%}
风险值数据={
标签：[“周一”、“周二”、“周三”、“周四”、“周五”]，
系列：[
document.querySelector（“#已注册的_id”）.value
]
};
新图表列表线（“.ct图表”，数据）//这条线创建图表

---

积分：此解决方案基于Reddit用户在以下帖子中的一条评论的建议：

是

登记的\u数据

列表还是string@ConstantineWesterink：在我的例子中，它是一个字符串：

[3200600180022000]

<!-- This SET is just to illustrate an example data source, the data would probably come from you controller -->
{% set enrolled_data = '[3,200,600,1800,22000]' %}

<!-- place a hidden field somewhere in your template to "hold" your data -->
<input type="hidden"  id="enrolled_id" value="{{ enrolled_data }}">

<!-- Now Javascript can look for the hidden field and get the data out of it -->
<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    document.querySelector('#enrolled_id').value
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>