Javascript中的Flask变量不会显示

我正在努力找出我在这里犯的错误

完整的故事：我已经将一些数据作为JSON保存到数据库中，如下所示

当我用代码调用此函数时，我从数据库中复制并粘贴。

<script>
particlesJS(
  {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#000000"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":1,"speed":3},"repulse":{"distance":100,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}
);
</script>

我使用以下代码：

<script>
particlesJS(
  {{preset}}
);
</script>

微粒子(
{{preset}}
);

而且它不起作用。我不完全清楚为什么，{{preset}}的内容应该与DB内容完全相同，对吗

我还尝试了JSON.parse（{{preset}}），但这也不起作用

你知道我做错了什么吗？希望我忽略了一些相当简单的事情

更新：这是呈现模板中的源代码：

    <script>
    particlesJS(
      {&#34;particles&#34;:{&#34;number&#34;:{&#34;value&#34;:80,&#34;density&#34;:{&#34;enable&#34;:true,&#34;value_area&#34;:800}},&#34;color&#34;:{&#34;value&#34;:&#34;#000000&#34;},&#34;shape&#34;:{&#34;type&#34;:&#34;circle&#34;,&#34;stroke&#34;:{&#34;width&#34;:0,&#34;color&#34;:&#34;#000000&#34;},&#34;polygon&#34;:{&#34;nb_sides&#34;:5},&#34;image&#34;:{&#34;src&#34;:&#34;img/github.svg&#34;,&#34;width&#34;:100,&#34;height&#34;:100}},&#34;opacity&#34;:{&#34;value&#34;:0.5,&#34;random&#34;:false,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:1,&#34;opacity_min&#34;:0.1,&#34;sync&#34;:false}},&#34;size&#34;:{&#34;value&#34;:3,&#34;random&#34;:true,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:40,&#34;size_min&#34;:0.1,&#34;sync&#34;:false}},&#34;line_linked&#34;:{&#34;enable&#34;:true,&#34;distance&#34;:150,&#34;color&#34;:&#34;#ffffff&#34;,&#34;opacity&#34;:0.4,&#34;width&#34;:1},&#34;move&#34;:{&#34;enable&#34;:true,&#34;speed&#34;:6,&#34;direction&#34;:&#34;none&#34;,&#34;random&#34;:false,&#34;straight&#34;:false,&#34;out_mode&#34;:&#34;out&#34;,&#34;bounce&#34;:false,&#34;attract&#34;:{&#34;enable&#34;:false,&#34;rotateX&#34;:600,&#34;rotateY&#34;:1200}}},&#34;interactivity&#34;:{&#34;detect_on&#34;:&#34;canvas&#34;,&#34;events&#34;:{&#34;onhover&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;repulse&#34;},&#34;onclick&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;push&#34;},&#34;resize&#34;:true},&#34;modes&#34;:{&#34;grab&#34;:{&#34;distance&#34;:400,&#34;line_linked&#34;:{&#34;opacity&#34;:1}},&#34;bubble&#34;:{&#34;distance&#34;:400,&#34;size&#34;:40,&#34;duration&#34;:2,&#34;opacity&#34;:1,&#34;speed&#34;:3},&#34;repulse&#34;:{&#34;distance&#34;:100,&#34;duration&#34;:0.4},&#34;push&#34;:{&#34;particles_nb&#34;:4},&#34;remove&#34;:{&#34;particles_nb&#34;:2}}},&#34;retina_detect&#34;:true}
    );
    </script>

微粒子(
34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；：：：{{{#34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；值区域面积和34；34；34；34；34；34；34；值区域和34；34；34；34；34；34；800}}}：800}}，00}，，}，}，}，，}00}00}，00}，00}，00}，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，以及34；34；34；34；颜色和34；颜色和34；颜色和34；颜色；颜色和颜色和形状、形状、形状、形状、形状、形状、形状、形状、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划、笔划34；34；src和34；34；：&&35; 34；34；34；34；34；"；34；34；img/github.svg和34；34；34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；34；图像和34；图像和34；34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；图像和34；34；34；图像34；{"；启用"；：假，速度"；：1，&"；不透明度&&#最小"；：0.1，"；同步&#假&&"；大小&&&&"；{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&34岁，40岁，和34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁，和34岁；34岁，和34岁；34岁，和34岁；34岁；34岁；大小；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；尺寸；34岁；34岁；34岁；34岁；40岁；34岁；34岁；40岁；40岁；40岁；40岁；40岁，和34岁；40岁；40岁；40岁，和34岁；40岁；40岁；40岁；40岁；40岁，和34岁；40岁；尺寸；40岁；40岁；40岁；40岁；尺寸；3 ffffff和#34；，"；不透明度和#34；：0.4，"；宽度和#34；：1}，"；移动和#34；：34；34；速度和34；34；6，，，"；34；34；34；34；34；6，，，"；34；方向和34；34；：：：："；34；34；34；34；34；启用；34；无；34；34；34；34；真实，34；34；34；34；34；6，&；6，&；34；6，&；34；34；方向和34；34；34；34；34；34；：：：：：：：：：：：：：：：：：：：：：&；34；34；34；34；34；34；34；34；34；34；34；34；34；34；34；方向和；方向和；方向和；34；34；34；方向和；34；34；34；34；34；34；34；34；34；34；34；34；方向和；34；34；；；；；；；；吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引，吸引34岁；34岁；34岁；34岁；34岁；35岁；34岁；34岁；34岁；34岁：真实，和34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；上下悬停；34岁；34岁：：：：：{34；34岁；34岁；34岁；34；34岁；34；34；34岁；34岁；模式；34岁；34；：：：：&；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；34岁；岁；以下；34岁；岁；34岁；岁；岁；岁；34岁；岁；34岁；岁；岁；岁；岁；岁；岁；岁；岁；岁；34岁；岁；岁；34岁；34岁；岁；以及与与与与与与与与；34岁；34岁#34；模式"；{"；抓取"；{"；距离"；:400，"；线链接"；{"；不透明度"；:1}，&"；气泡"；：34岁，40岁，&#；34岁；34岁；34岁；34岁；34岁；34岁，40岁，"岁；34岁；34岁；持续时间和34；34岁：2，，"；距离；34；距离；距离；34；距离；距离；距离；34；不透明度；不透明度；34；34；34；：1，&；34；1，和34；34；34；1，&；34；34；34；速度；34；34；速度；34；34；34；34；34；34；34；34；34；3}，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，3534；34；34；34；34：{"；粒子"；4}，&"；移除"；{"；粒子&#nb"；2}}}，"；视网膜&#检测"；：真}
);

将其更改为

{{preset | safe}

，它应该可以工作

在浏览器中查看源代码以查看

{preset}

即将发布。您可能会遇到一些unicode或语法问题，无法按预期进行解析。请将源代码粘贴到此处以进行更多诊断。哈哈，您是对的，我已编辑了原始帖子，它位于底部。因此，本质上出现的是"；，而不是“…嗯，这是如何解决的？使用

JSON.parse（）

？它看起来就像JSON.parse（）在这种混乱的情况下，Hahaaa成功了！你能解释一下原因吗？Flask需要使用

|safe

标志将内容标记为安全的，以便在模板中用作html。否则，它将不知道在代码中添加一个
作为要显示给用户的文本或句子中的换行符之间的区别。

    <script>
    particlesJS(
      {&#34;particles&#34;:{&#34;number&#34;:{&#34;value&#34;:80,&#34;density&#34;:{&#34;enable&#34;:true,&#34;value_area&#34;:800}},&#34;color&#34;:{&#34;value&#34;:&#34;#000000&#34;},&#34;shape&#34;:{&#34;type&#34;:&#34;circle&#34;,&#34;stroke&#34;:{&#34;width&#34;:0,&#34;color&#34;:&#34;#000000&#34;},&#34;polygon&#34;:{&#34;nb_sides&#34;:5},&#34;image&#34;:{&#34;src&#34;:&#34;img/github.svg&#34;,&#34;width&#34;:100,&#34;height&#34;:100}},&#34;opacity&#34;:{&#34;value&#34;:0.5,&#34;random&#34;:false,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:1,&#34;opacity_min&#34;:0.1,&#34;sync&#34;:false}},&#34;size&#34;:{&#34;value&#34;:3,&#34;random&#34;:true,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:40,&#34;size_min&#34;:0.1,&#34;sync&#34;:false}},&#34;line_linked&#34;:{&#34;enable&#34;:true,&#34;distance&#34;:150,&#34;color&#34;:&#34;#ffffff&#34;,&#34;opacity&#34;:0.4,&#34;width&#34;:1},&#34;move&#34;:{&#34;enable&#34;:true,&#34;speed&#34;:6,&#34;direction&#34;:&#34;none&#34;,&#34;random&#34;:false,&#34;straight&#34;:false,&#34;out_mode&#34;:&#34;out&#34;,&#34;bounce&#34;:false,&#34;attract&#34;:{&#34;enable&#34;:false,&#34;rotateX&#34;:600,&#34;rotateY&#34;:1200}}},&#34;interactivity&#34;:{&#34;detect_on&#34;:&#34;canvas&#34;,&#34;events&#34;:{&#34;onhover&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;repulse&#34;},&#34;onclick&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;push&#34;},&#34;resize&#34;:true},&#34;modes&#34;:{&#34;grab&#34;:{&#34;distance&#34;:400,&#34;line_linked&#34;:{&#34;opacity&#34;:1}},&#34;bubble&#34;:{&#34;distance&#34;:400,&#34;size&#34;:40,&#34;duration&#34;:2,&#34;opacity&#34;:1,&#34;speed&#34;:3},&#34;repulse&#34;:{&#34;distance&#34;:100,&#34;duration&#34;:0.4},&#34;push&#34;:{&#34;particles_nb&#34;:4},&#34;remove&#34;:{&#34;particles_nb&#34;:2}}},&#34;retina_detect&#34;:true}
    );
    </script>