views.pyから持ってきた変数をscript内で使いたい

djangoでviews.pyから持ってきたデータ（model.objects.all(),で取得したデータ）を
HTMLのscript内で使用したいのですが上手くいきません。

下記プログラムはテキストエリアにサジェスト機能を実装するプログラムで、
views.pyから送られてきたデータを{% for y in x %}～{% endfor %}等を利用して出力したいと思っております。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AutoCompleteウィジェット</title>
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  // 3候補リストに表示するデータを配列で準備
  var data = [

      'accepts',
      //ここに{% for y in x %}タグのように繰り返し処理を施してdata 配列（文字列の配列）の中に連ならせたい。

  ];

  // 2オートコンプリート機能を適用
  $('#txtKeywd').autocomplete({
    source: data,
    autoFocus: true,
    delay: 500,
    minLength: 2
  });
});
</script>
</head>
<body>
<!--1オートコンプリート機能を適用するテキストボックスを準備-->
<label for="txtKeywd">キーワード</label>：
<input id="txtKeywd" type="search" size="20" maxlengh="50" />
</body>
</html>

初歩的な内容になってしまい申し訳ありませんが
よろしくお願いいたします。

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

回答1件

{% for %}を使ってできないこともないですがviews.pyである程度処理してからデータを渡したほうがやりやすいと思います。

以下のmodels.py、views.py、test.htmlを参考にしてみてください(コードは必要な個所以外省略して書いています)。

python
1# models.py
2class Book(models.Model):
3    name = models.CharField('書籍名', max_length=255)
4
5    def __str__(self):
6        return self.name

python
1# views.py
2class test(TemplateView):
3    template_name = 'test.html'
4    def get_context_data(self, **kwargs):
5        context = super().get_context_data(**kwargs)
6        # ポイント1
7        context['list'] = [i['name'] for i in Book.objects.all().values('name')]
8        return context

html
1<!-- ポイント2 -->
2{{list|json_script:"book_name"}}
3<script>
4    var data = JSON.parse(document.getElementById('book_name').textContent);
5    data.unshift('accepts');
6    for(i = 0; i<data.length; i++){
7        console.log(data[i]);
8    }
9</script>

ポイントが2つあるのでそれについて少し解説します。
ポイント1は[i['name'] for i in Book.objects.all().values('name')]の部分です。values()を使うことで辞書型でデータを取ることができます。それをリスト内法表記を使って値のみのリストをつくり、データとして渡しています。
QuerySet API reference | Django documentation | Django

ポイント2は{{list|json_script:"book_name"}}の部分です。こちらに関してはteratail内の回答で同じ説明があったのでそちらを参考にしてください。
Django(2.1.3)でViewからテンプレートへ渡した変数をJavaScriptで利用する方法

投稿2019/06/09 16:41