djangoのcontextをjavascriptに渡す際に困る場合がある件

大した内容ではないので問題点と対処法を軽く書く。

djangoのcontextに格納したデータをjavascriptにわたす方法

1. 最初にviewにてデータをcontextに格納する
2. テンプレートにてjavascriptを走らせ、contextのデータを受け取る

def example(self, request, *args, **kwargs):
    context = {}
    context["data"] = "my_data"
    return render(request, "hoe/hoge.html", context)

テンプレートのscriptタグ内でdataをを取り出す。

<script>
var data_of_django = "{{ data }}";
console.log("{{ data }}")
</script>

こんな感じでscriptタグ内でdjangoのcontextデータを取り出し加工したりして使っていくのが基本。

問題となるパータン

モデルの属性としてTextAreaフィールドを設定している場合がある。 TextAreaは改行もデータとして保存できるが、この改行がjavascriptではエラーの原因になってしまう。

対処法

javascriptに渡すデータをjsonに加工すること、またテンプレートでは"|safe"を使って取り出すこと。この２点で対処できる。

import json
def example(self, request, *args, **kwargs):
    context = {}
    context["data"] = json.dumps("my_data") #ココ
    return render(request, "hoe/hoge.html", context)

<script>
var data_of_django = "{{ data|safe }}";
console.log("{{ data|safe }}")
</script>