之前在用 flask 搭建一個網頁時，我想要在模版中傳入一個 JSON 的字串，結果發現通過 Jinja2 傳入的 JSON 資料變成了了亂碼。其中的引號和空格都變為了 &#xx; 的形式：

var humidityJSON = {{ humidityJSON }};

傳入之後：

var humidityJSON = [{'Time': '08/18/2018 09:25:45', 'Humidity': 25}...

在一番檢索後，我發現原來是因為 Jinja2 對 JavaScipt 的保護措施，導致不能很好地傳入 JSON 資料。它會將其中的一些符號變為 HTML 中的編碼。

這樣直接就導致了生成的網頁渲染失敗。我嘗試了一些方法，比如去掉傳入字串中的空格，但是其中的引號也同樣會造成亂碼，所以這種方法並不可行。

嘗試了半個上午無解之後，我去 Stack Overflow 上面搜尋了這樣一個問題，終於找到了解決方法：

Stack Overflow - sending data as JSON object from Python to Javascript with Jinja

使用 tojson 設定

其實只需要在傳入的資料後加上 tojson 的設定就能夠完成傳遞 JSON 資料了。

var humidityJSON = {{ humidityJSON|tojson }};
 

Stack Overflow 網站上使用的方法是 data|tojson|safe 但是其實在新版本的 Jinja2 之後就不需要 safe 選項了

var humidityJSON = [{"Humidity": 25, "Time": "08/18/2018 09:25:45"}...

成功解決，果然 Stack Overflow 是個解決問題的好地方。