djangoからjavascriptにデータを渡すには

djangoを使ってリストや辞書形式でデータ取得したものをjsに渡してグラフ描画したいです。

リストや辞書形式でデータ取得したものをどういう過程を経てjsに渡せますか？

行動規範の内容に同意します

回答1件

ベストアンサー

よくやる手法としては、Python/JavaScriptどちらでも容易に扱えるJSONを仲介することが多いです。

DjangoのテンプレートにJSON文字列を渡す

とりあえず感触を得たい・Python→JSのケースがそんなに多くないならこれで十分です。

概要

Pythonでなら、json.dumpsでPythonオブジェクトをJSON文字列に変換できます。
この内容をDjangoテンプレートに引き渡して、JSON.parseでJS側でオブジェクトに変換すれば、
JS側で利用することが出来ます。

コード例

python
1## views.py
2import json
3from django.shortcuts import render
4
5def index(request):
6    data = {
7        'sample1': [1, 2, 3],
8        'sample2': [3, 6, 9],
9    } 
10    return render(request, "index.html", {'data_json': json.dumps(data)})

html
1<!-- index.html -->
2<html>
3  <script>
4  const data = JSON.parse('{{ data_json|safe }}');
5  
6  console.log(data.sample1);  // [1, 2, 3]
7  </script>
8</html>

Django側でJSONレスポンスを返すviewを用意する

「グラフ描画を動的に変えたい」など、テンプレート渡しでは対応し難いケースで必要になってきます。

概要

Djangoではいくつかの種類でレスポンスを返せるようなクラスが提供されているのですが、
その中にはJSONも含まれています。
JsonResponseでは引数にオブジェクトを渡すと上記のjson.dumpsと同等のことを行ってレスポンスを返してくれます。

コード例

python
1## views.py
2import json
3from django.http.response import JsonResponse
4
5
6def data_json(request):
7    # /data のURLで受け付けるview関数
8    data = {
9        'sample1': [1, 2, 3],
10        'sample2': [3, 6, 9],
11    } 
12    return JsonResponse(data)

html
1<!-- index.html -->
2<html>
3  <script>
4  fetch("/data")
5    .then(response => response.json())
6    .then(data => {
7      console.log(data.sample1)  // [1, 2, 3]
8    })
9  </script>
10</html>

余談：Django REST Frameworkを活用する

上記の「Django側でJSONレスポンスを返すviewを用意する」の派生として、
Web API向けの拡張ライブラリであるDjango REST Frameworkが存在します。
DjangoをAPIサーバーとして扱うならこういった型を使うと良いケースもあります。

公式Doc

投稿2020/10/22 15:03

attakei

総合スコア2740

yyjfou

2020/10/24 14:25

ありがとうございます。「Django側でJSONレスポンスを返すviewを用意する」のfetchを使った部分のHTMLについて質問です。fetch関数は非同期処理を行う関数という認識で合ってますか？また解答例の場合だと'sample1'が[1, 2, 3,7]になった場合、urlをロードしなくてもhtml側で[1, 2, 3,7]ということでしょうか？

attakei

2020/10/25 06:43

> fetch関数は非同期処理を行う関数という認識で合ってますか？その認識で問題ないと思います。MozillaのサイトにFetch APIの解説があるので、そちらを参照するなどしてみてください。 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API > また解答例の場合だと'sample1'が[1, 2, 3,7]になった場合、urlをロードしなくてもhtml側で[1, 2, 3,7]ということでしょうか？「URLをロード」がどういう振る舞いを意図した表現なのかがよくわかりませんでした。少なくとも、必要な実装をしない限りはフロントエンドがバックエンドを勝手に検知する手段は無いので、APIをコールして変更を知る必要はあります。 JavaScript側でAPIコールだけすればいいので、ブラウザの画面視点で言えばURLをロードしなくてもいいいとは言えなくもないです。

行動規範の内容に同意します