0

Djangoのユーザーデータを使ってグラフを書こうとしています。
viewsで以下のようにモデルをJSONフォーマットで送るように設定しています。

views.py

diary_list = serializers.serialize('json', Diary.objects.filter(author=current_user.id).order_by('written_date'))

Diary.objects.filter(author=current_user.id).order_by('written_date'))
def defaultconverter(o):
        if isinstance(o, (datetime, date)):
            return o.isoformat() + 'Z'

# dump data _to pass the data to Javascript
diary_listJSON = dumps(diary_list, ensure_ascii=False, default = defaultconverter)

templateでの受け取りは以下のようにしました。

template

{{ diary_list|json_script:'diary_lists' }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" type="text/javascript"></script>
<canvas id="myChart" height="450" width="700"></canvas>
<script type="text/javascript">

    // Prepare graph, data
    var ctx = document.getElementById("myChart").getContext("2d");
    const diarylist = JSON.parse(document.getElementById('diary_lists').textContent, function (key, value) {
        if (key == "written_date") {
            return new Date(value);
        } else {
            return value;
        }
    });
    console.log(diarylist);
    console.log(typeof diarylist.pk);

一つ目のconsole.logの出力は、

"[{\"model\": \"diaries.diary\", \"pk\": 2, \"fields\": {\"author\": 2, \"written_date\": \"2021-11-04\", \"emotion_score\": 50, \"title\": \"テスト投稿2\", \"content\": \"テスト2として投稿。バックエンドの構築も初めの設定が難しいけど、あとは結構楽になってくる。\"}}, {\"model\": \"diaries.diary\", \"pk\": 1, \"fields\": {\"author\": 2, \"written_date\": \"2021-11-21\", \"emotion_score\": 60, \"title\": \"テスト入力\", \"content\": \"順調にバックエンド構築中\"}}]"

うまくパースできたかと思ったのですが、二つ目のconsole.logの結果は、

undefined

となっていて、javascript内でうまくオブジェクトになっていないようなのです。
どうしたらうまくjavascriptのモデルにできるか教えていただきたいです。

1 件の回答 1

0

今回参照しようとしているオブジェクトは以下で正しいとすると参照するオブジェクトの参照方法が違います。

[{
  fields: {
    author: 2,
    content: "テスト2として投稿。バックエンドの構築も初めの設定が難しいけど、あとは結構楽になってくる。",
    emotion_score: 50,
    title: "テスト投稿2",
    written_date: [object Date] { ... }
  },
  model: "diaries.diary",
  pk: 2
}, {
  fields: {
    author: 2,
    content: "順調にバックエンド構築中",
    emotion_score: 60,
    title: "テスト入力",
    written_date: [object Date] { ... }
  },
  model: "diaries.diary",
  pk: 1
}]

間違った参照方法

diarylist.pk

正しい参照方法(どっちのオブジェクトのpkを参照しようとしているのかわかりませんが。。)

diarylist[0].pk
diarylist[1].pk

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。