Python + Jinja2 でデータを HTML に埋め込んで JavaScript 側から利用する

HTML に JSON データを埋め込んで JavaScript から利用する - Qiita

サーバのデータをクライアントサイドの JavaScript で扱いたいとき、API を用意して取得する方法が一般的だが、もっと簡易的な方法として HTML に JSON データを埋め込むという方法がある。

これを Python + Jinja2 でやる、という話。

まず、こういう Jinja2 カスタムフィルタを作る。

import json

def jinja2_embed_as_json_filter(data, name: str) -> str:
    """データを HTML に埋め込んで JavaScript から利用できるようにする Jinja2 フィルタ"""
    json_str = json.dumps(data).replace('<', r'\u003C').replace('>', r'\u003E')
    return f'<script type="application/json" id="{name}">{json_str}</script>'

例えば aiohttp を使っている場合はこんな感じでカスタムフィルタを追加する。

import aiohttp_jinja2

aiohttp_jinja2.setup(
    app,
    # その他の引数は省略
    filters={'embed_as_json': jinja2_embed_as_json_filter}
)

Jinja2 テンプレート内ではこんな感じで使う。
ここでは変数 week には ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] がセットされているものとする。

{{ week | embed_as_json('week') | safe }}

これは以下のように変換される。

<script type="application/json" id="week">["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]</script>

ブラウザ側 JavaScript ではこんな感じで利用できる。

var week = JSON.parse(document.getElementById('week').textContent);

console.log(week); //=> ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]