解決使用 Jinja2 插入 JSON 數據時出現的亂碼

以前在用 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 是個解決問題的好地方。