Flask Variables in Javascript Do Not Show Up

Question

I'm struggling to figure out the mistake I made here.

The full story: I have saved some data to a database as JSON, like so

Photo of Database

When I call this function with the code I copy and pasted from the DB.

<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>

Everything works fine. However, when I pass it in through Python Flask...

@app.route('/load_ban', methods = ['GET', 'POST'])
def load():
  banner = get_banner_data()

  but_txt = banner.button_text
  ban_txt = banner.banner_text
  text_color = banner.text_color
  button_color = banner.button_color
  button_border_color = banner.button_border_color
  button_size = banner.button_size
  banner_size = banner.banner_size
  preset = banner.animated_presets

return render_template('banner.html', but_txt=but_txt, ban_txt=ban_txt, text_color = text_color, button_color = button_color, button_border_color = button_border_color, button_size = button_size, banner_size = banner_size, preset = preset)

I use the following code:

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

And it does not work. I am not entirely sure why, as the contents of {{preset}} should be exactly identical to the DB contents, right?

I've also tried JSON.parse({{preset}}) and that does not work either.

Any ideas as to what I could be doing wrong? Hopefully I have overlooked something rather simple.

UPDATE: This is the source code in the rendered template:

    <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>

Answer 1

Change that to {{preset|safe}} and it should work