DjangoからJSへの値の受け渡しについて

Question

DjangoからJSに値を受け渡したい

DjangoでHTMLに渡しているデータをJSでも同様に使いたいです。

# view.py
from django.views import generic
from . import mixins
from memorial_calendar.models import MemorialDay


# Create your views here.
class MemorialCalendar(mixins.MonthWithScheduleMixin, generic.TemplateView):
    """スケジュール付きの月間カレンダーを表示するビュー"""
    template_name = 'memorial_calendar/memorialcalendar.html'
    model = MemorialDay
    date_field = 'memorialdate'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        calendar_context = self.get_month_calendar()
        context.update(calendar_context)
        return context

returnしているcontextにはカレンダーに表示する日付とスケジュールが
格納されています。

{% extends 'base.html' %}
{% load static %}
{% block content %}

<!-- ここでカレンダーをクリックしたときにJavascriptのソースが呼ばれる -->
    <script type="text/javascript" src="{% static 'memorial_calendar/js/click-calendar.js' %}"></script>
    <link rel='stylesheet' href="{% static 'memorial_calendar/css/style.css' %}">
    <a href="{% url 'memorialcalendar' month_previous.year month_previous.month %}">前月</a>
    {{ month_current | date:"Y年m月" }}
    <a href="{% url 'memorialcalendar' month_next.year month_next.month %}">次月</a>
    <table class="table">
        <thead>
        <tr>
            {% for w in week_names %}
                <th>{{ w }}</th>
            {% endfor %}
        </tr>

<!-- 省略​-->

// 下記でどうにかしてpythonで作成したcontextを受け取りたい
var context = ?????????

流れとしてはDjango→HTML→JSになるような気がするのですが、どのように値を渡せばよいかわからずにいます。
簡単な文字列や数字ならidで付与して(たぶんあんまりよくない)、JSで使えばいいと思うのですが、オブジェクトだとどのように取得すればよいかわからないです。

Django初心者のため、詳しく教えていただけるうれしいです。

Answer 1

おはようございます。

問題文読ませていただきました。

どこまでうまくいっているのか、わからなかったので、以下の手順を試してみてどこで詰まるか教えていただきますか？????‍♂️

1. こちらの記事を熟読する。
2. こちらの記事にあるように、htmlに<script src="{% static 'javascript/sample.js' %}"></script>を追加、sample.jsファイルを作成する。
3. developer toolsを開く。
4. consoleタブへ移動する。
5. リロードしてsample.jsファイルに記載したconsole.log("書き換えテスト") が表示されているのか確認する。
6. こちらの記事のベストアンサーを読んでfetchを活用する。

ご確認のほど、よろしくお願いいたします。????‍♂️

Comments

[torutakakura]

ご回答いただき、ありがとうございます。

5,リロードしてsample.jsファイルに記載したconsole.log("書き換えテスト") が表示されているのか確認する。

→ここまでは確認できています。

６，こちらの記事のベストアンサーを読んでfetchを活用する。
→こちらを試しましたが、contextにはDBから取得したテーブルデータが入っており、以下のような
　Djangoのエラーになりました。
＞＞＞
Object of type MemorialCalendar is not JSON serializable
＞＞＞

１，一度、テーブルデータを辞書型に変換して渡すべきなのでしょうか？

２、もしJsonResponseでデータ取得できた場合、JSで記載しなおす必要があるのでしょうか？
　HTML内で使用している{{hogehoge}}{% if hoge %}などの記載も
　JsonResponseで返却した場合、使用できなくなるような気がします。

３，また懸念点としてカレンダーを表示するため、URLが動的に変更されます。
　教えていただいたベストアンサーでは、URLは固定されており毎回同じデータを取得しています。
　その部分の記載もどうすれば、迷っています。

[退会済みユーザー]

エラーは出ていますが、fetchを使えるところまでは理解できた感じですね。あとは、fetch内にdjangoで取得しているパラメータをbody要素に格納して渡すこと、jsを活用してbuttonクリックなどのイベントを用意してあげるとうまくいきますね。以下の記事を参考ください。
https://stackoverflow.com/questions/61543829/django-taking-values-from-post-request-javascript-fetch-api
https://www.javadrive.jp/javascript/event/index2.html

1~3の質問に関しては、当初の目的(DjangoからJSへの値の受け渡しについて
)とは外れると思いますので、今は考えないことにします。

[torutakakura]

・fetchを使えるところまでは理解できた感じですね。あとは、fetch内にdjangoで取得しているパラメータをbody要素に格納して渡すこと

→body要素に格納する際に、以下のように行おうとしましたが
　エラーとなり、うまくいきませんでした。
＞＞＞views.py
self.request.body = context
return context
＞＞＞
contextには{日付型:<Memorialay>,日付型:<Memorialay>,日付型:<Memorialay>,}といった形の値が入っています。※Memorialayはテーブルから取得したpythonオブジェクトになります。

＞＞＞エラー内容
can't set attribute
＞＞＞
すみません、自分の勉強不足でcontextをどのように渡せば良いかわかっていないです。
body要素に格納するとは、以下のようなことですよね？
self.request.body = context
このように格納してfetchAPIを使用して取得するものだと思っています。認識あっていますでしょうか？

・jsを活用してbuttonクリックなどのイベントを用意してあげるとうまくいきますね。以下の記事を参考ください。

→クリックした際のイベントは取得することは確認できました。

[退会済みユーザー]

うーん、、目的から外れてきている気がしますので、一度整理しましょう。

torutakakuraさんが実現したいことは以下の要項であっていますか？
・「DjangoでHTMLに渡しているデータをJSでも同様に使いたい」 → 自分はまず「jsからhtml要素を取得すること = DjangoでHTMLに渡しているデータを利用する」認識でして、jsのbuttonクリックなどの処理が実現できるのか確認させていただきました。

・ただ、別の解釈として、js内でdjangoと通信して、データ取得したい可能性もあると考えておりまして、その場合のためにfetchの使い方をお伝えした次第です。

↑ ここまでで認識ずれていたら教えてください。????‍♂️

今悩んでいることとしては、
fetchは利用できるが、うまくjs→django→jsへ値渡しができないということで問題ありませんか？

[torutakakura]

torutakakuraさんが実現したいことは以下の要項であっていますか？
・「DjangoでHTMLに渡しているデータをJSでも同様に使いたい」 → 自分はまず「jsからhtml要素を取得すること = DjangoでHTMLに渡しているデータを利用する」認識でして、jsのbuttonクリックなどの処理が実現できるのか確認させていただきました。

→上記の内容であっています。
　Django からHTMLに渡しているcontextをJSで使えればそれでよいです。
　ただクリックイベントからcontextをそのまま受け渡すのはデータ内容的に
　難しいのでfetchAPIの使い方を教えていただいたと思っております。

<div id='{{ calendar_days}}' class='hogehoge'></div>
上記からidを取得することはできるが、日付型、pythonオブジェクトの型は維持されず、JSで
forループなどの思ったコーディングができない。

・ただ、別の解釈として、js内でdjangoと通信して、データ取得したい可能性もあると考えておりまして、その場合のためにfetchの使い方をお伝えした次第です。

→はい、そうです。

すみません、知識不足で質問があいまいになってしまってたと思います。
手段はどうあれ、views.pyでreturnしているcontextをJSで使えればよいのですが、、、
それは難しいでしょうか？

[退会済みユーザー]

こちらを利用しましょう。
・https://qiita.com/kozakura16/items/6b809fec96c41fa87880

Answer 2

DJangoのことはよくわかりませんが、どういう値をどう使いたいかによるのではないでしょうか。
jsファイルにはフレームワークのテンプレートの記述はできませんので、htmlにscriptタグ書くとか（エスケープは必須）、何かしらでHTMLに入れておいて(inputとかtextとかなんでも)何かしらのイベントトリガーで取得するとか、色々考えられなくもないです。

オブジェクトだと

HTML上に表示できるのは文字列もしくは文字列と解釈できるもの（数値など）だけなので、
JSONエンコードしておくのが良くあるやり方です。