Djangoからjsファイルに変更したモデルクラスを渡したい

Question

前提

現在、Djangoでjavascriptのfullcalendarを使用しDB内で登録されている予定を表示させるシステムを作成しています。
ただその中でdjnagoのviews.pyからjsファイルにjson通信にて値を渡す中でエラーが発生してしまう。

実現したいこと

・Djangoのviews.pyで加工したデータをわたしたい。
（views.pyでjson形式にしたリストをcontextにdictで設定しreturnする。）
（json形式にはjson.dumpsで形式変更する。)
・jsファイルにてJSON.parseでjsファイルで使える形にする。
（形式変更後はfor文で回して使用予定）

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'textContent')
    at schedule.js:2:67
(anonymous) @ schedule.js:2

該当のソースコード

#views.py
class ScheduleView(ListView):
    template_name='schedule.html'
    print(Event)
    context_object_name = 'Event'
    model = Event
    def get_context_data(self, **kwargs):
        choice_query_set = Event.objects.all()
        choice_list = list(choice_query_set.values())
        print(choice_list)
        print()
        print("休憩")
        print("")
        datetime_format_change = []
        for e in choice_list:
            e_one = e
            print("1つ目")
            print(e)
            print(e.get("title"))
            print("2つ目")
            print(e_one)
            e_start = e.get("start_date")
            e_end = e.get("end_date")
            e_last = e.get("last_update")
            e_one["start_date"] = e_start.strftime('%Y-%m-%dT%H:%M')
            e_one["end_date"] = e_end.strftime('%Y-%m-%dT%H:%M')
            e_one["last_update"] = e_last.strftime('%Y年%m月%d日')
            datetime_format_change.append(e)
        print(datetime_format_change)
        toJson = json.dumps(datetime_format_change)
        print()
        print("tojsonのやつ")
        print(toJson)
        context={
            "event_data":toJson
        }
        return context

//以下はDjangoからjson形式で渡された値をjsファイルで使用できるようにする。
console.log("書き換えテスト");
const eventData = JSON.parse(document.getElementById("event-data").textContent);
//ここまでで形式変更終了。
//以下はfullcalendarの表示用の設定。上記の記述を消せば下記の設定は問題なく表示される。
document.addEventListener('DOMContentLoaded', function () {
    console.log(Event)
    const calendarEl = document.querySelector('.calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        navLinks: true,
        businessHours: true,
        editable: true,
        locale: 'ja',
        buttonText: {
            prev:     '<',
            next:     '>',
            prevYear: '<<',
            nextYear: '>>',
            today:    '今日',
            month:    '月',
            week:     '週',
            day:      '日',
            list:     '予定リスト'
        },
    });
    calendar.render();
});

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

{% block title %}SUNDAY FC SCHEDULE{% endblock %}

{% block static_css %}
    <link rel="stylesheet" href="{% static 'css/calendar/main.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/schedule.css' %}">
{% endblock %}
{% block static_js %}
    <script src="{% static 'js/calendar/main.min.js' %}"></script>
    <script src="{% static 'js/schedule.js' %}"></script>
{% endblock %}


{% block contents %}
    
    <div class="container">
        <div id='calendar' class="calendar"></div>
    </div>
    <div>
       {{event_data}}
    </div>
{% endblock %}

試したこと

①Django側でjson形式に変更しただけでdict形式でcontextに設定せず、returnする。
これだとcontextがductではないというエラーが出る。

補足情報（FW/ツールのバージョンなど）

Django ver:3.2.5
python ver:3.8.12
pillow ver:9.0.1

Answer 1

getElementByIdはHTMLで指定のIDが設定されている要素(のオブジェクト)を取得するメソッドですので
(ビューの出力結果の)HTMLに指定のIDを設定した要素がないと取得できません。
event_dataの外側にあるDIV要素にID設定すればいいんじゃないでしょうか。

Comments

[con2319]

勘違いしてました。djangoから直接jsファイルに渡すと思ったらそうではなくテンプレート経由でなくてはならないからでした。ヒントになりました。ありがとうございました。

Answer 2

単純にevent-dataのidが設定されている要素が見つからないので(nullオブジェクトからtextContentプロパティを読む形になってるから)エラーになってるんじゃないかと思いますが。
HTMLがないので何とも言えませんね。

Comments

[con2319]

ご回答いただきましてありがとうございます。
現在、htmlを記載しました。あと『event_dataに関してはviews.pyにて設定したdictのキーになります。
html側では設定しておりません。
ご指摘いただいたevent-dataを下記のようにキー値と同じ文字列にしたのですがやはり同じようなエラーが出るのですがわかりますか？
event-data→event_data