Ajaxで取ってきたデータを、テンプレート側でforループのように処理したい

DjangoでWebアプリを作っています。
selectで選択した「language」をAjaxでサーバーに送り、サーバーから帰ってきた「type」データをhtmlに表示したいです。
typeはtype_dictという辞書型で帰ってくるのですが、それをどうしたらhtmlに表示できるか分かりません。template側で、forループのようなことができれば、ありがたいのですが。

html
1# template.html
2<div class='json'></div> <!--このdivの間に帰ってきたデータを表示したい-->
3<script type="text/javascript">
4        $(document).ready(function () {
5            $.ajax({
6                type: 'get',
7                url: "{% url 'meiboku:ajax_response' %}",
8                dateType: 'json',
9                data: {
10                    'language': 'language' /*selectで選択したlanguageをAjaxで送る。*/
11                }
12            }).done(function (data) {
13                $('div.json').append(data.types);
14            });
15        });
16    </script>

python
1# models.py
2
3# 言語を扱うモデル
4class Language(models.Model):
5    language_name = models.CharField(max_length=50)
6    iso_639 = models.CharField(max_length=10)
7
8    def __str__(self):
9        return self.iso_639
10
11
12# 表示対象のモデル
13class Type(models.Model):
14    language = models.ForeignKey(Language, on_delete=models.CASCADE)
15    name = models.CharField(max_length=100)
16
17    def __str__(self):
18        return str(self.type_ja.name) + ' in ' + str(self.language)

python
1# views.py
2
3from django.core import serializers
4from django.http import JsonResponse
5
6# Ajaxを処理
7def ajax_response(request):
8    language = request.GET.get('language')
9    if language:
10        types = Type.objects.filter(language=language).all()
11        types_dict = serializers.serialize('json', types)
12        data = {
13            'types': types_dict,
14        }
15    return JsonResponse(data)

以上の処理を通じて、
htmlの<div class='json'></div>には、

[{"model": "test.type", "pk": 1, "fields": {"language": 2, "name": "sampleA"}}, {"model": "test.type", "pk": 2, "fields": {"language": 2, "name": "sampleB"}}, {"model": "test.type", "pk": 3, "fields": {"language": 2, "name": "sampleC"}}]

という文字列を表示する所まではできました。上記の文字列がそのまま表示されています。

sampleA 　→ Typeモデルのnameに格納
'英語'　　→　Languageモデルのlanguage_nameに格納

sampleB
'英語'

sampleC
'英語'
という表示がしたいです。
（現在、「language:2」と表示されているのは、Languageモデルのidです。）

可能なら、Djangoのテンプレートを使って、

html
1{% for type in types_dict %}
2    {{type.name}}<br>
3    {{type.language}}<hr>
4{% endfor %}

のようなことができればありがたいのですが、Djangoのテンプレートシステムは、サーバー側で処理されるものなので、Ajaxにおいては作動しないと思います。
どのような方法を使えば、Ajaxでサーバーから取ってきたデータを、forループのような形で展開できるでしょうか。

お分かりの方、ご教示頂ければ幸いです。
よろしくお願い致します。

退会済みユーザー

2019/09/25 00:20

サーバー側の処置は問題なくできていてアップされている JSON 文字列の応答が返ってきているのですよね。そうだとすると、.done(function (data) の data に JSON 文字列を JavaScript オブジェクトにパースした結果が代入されているはずですが、それを表示できればよくて、そのやり方（JavaScript / jQuery のコードの書き方）がわかれば良いのですか？

Lhankor_Mhy

2019/09/25 00:35

'英語' という文字列はどこから取得しているのですか？

退会済みユーザー

2019/09/25 01:16 編集

Lhankor_Mhyさん '英語'は、Languageモデルのnameに格納されています。 Djangoのテンプレートタグであれば、ForeignKeyの情報も取れると思いますので、同じようにしたいです。

退会済みユーザー

2019/09/25 01:22

アップされている JSON 文字列の応答が返ってきていると思いましたが、$('div.json').append(data.types); の結果がアップされている文字列 [{"model": "test.type", "pk": 1, "fields": {"language": 2, "name": "sampleA"}}, {"model": "test.type", "pk": 2, "fields": {"language": 2, "name": "sampleB"}}, {"model": "test.type", "pk": 3, "fields": {"language": 2, "name": "sampleC"}}] ということのようですね。違います？あと、"language": 2 の 2 が英語を意味するようですが、そうなんですか？　それなら最初から "language": ”英語” とできないのですか？

退会済みユーザー

2019/09/25 01:26

SurferOnWwwさんご指摘の通りです。今、ふと思ったのですが、jqueryではDjangoのテンプレートタグのようにForeignKeyなどを処理してくれるような便利な方法はないので、views.py側でJSONの形を整えるしかなく、整えたJSONをjQueryのfor ループで回しながら表示するしかないのかもしれないと思いました。 Modelのデータを辞書形式でそのままtemplate側にAjaxで持って来て、ForeignKeyなどの処理もやってくれるような仕組みがないのかと思ったのですが、そのような方法は存在しないのかもしれないですね。調べていたら、RESTフレームというのが引っかかったので、ひょっとしたら、それが使えるかもしれないと思いました。分かりづらく申し訳ありません。

Lhankor_Mhy

2019/09/25 01:27

わかりました。 sampleA という文字列はどこから取得しているのですか？

退会済みユーザー

2019/09/25 01:34

SurferOnWwwさんはい、その通りです。そこに書いてあるとおり、 [{"model": "test.type", "pk": 1, "fields": {"language": 2, "name": "sampleA"}}, {"model": "test.type", "pk": 2, "fields": {"language": 2, "name": "sampleB"}}, {"model": "test.type", "pk": 3, "fields": {"language": 2, "name": "sampleC"}}] という、そのままの文字列が表示されています。 "language": 2 の 2は、英語を意味しますが、'英語'はTypeのForeignKeyであるLanguageのnameに保存されています。そのため、'英語'と表示するためには、views.py側でそのように処置しておく必要があるということだと思います。

退会済みユーザー

2019/09/25 01:35

Lhankor_Mhyさん 'SampleA'は、Typeモデルのnameに格納しています。

退会済みユーザー

2019/09/25 01:41

> "language": 2 の 2は、英語を意味しますがそれが分かるのはサーバー側だけですよね？　であれば、ブラウザが "language": 2 から 2 が何に該当するのかサーバーに問い合わせるか、あらかじめ言語/数字の一覧表をブラウザに保持してクライアントスクリプトで一覧表から取得するということをせざるを得ません。それ、非常に無駄だと思うのですが。なので最初から "language": ”英語” というデータをブラウザに渡すのが良いと思うのですが、できない事情があるのでしょうか？

退会済みユーザー

2019/09/25 01:50

とりあえず、今の形のままで name, language を取得するコードを回答欄に書いておきます。

Lhankor_Mhy

2019/09/25 02:02

つまり、Djangoで外部結合したいということですね。私の手に負えない範囲でした。申し訳ありません。

退会済みユーザー

2019/09/25 03:03 編集

SurferOnWwwさん、Lhankor_Mhyさんありがとうございました。

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

回答1件

ベストアンサー

注：以下は、表題にあるように「Ajaxで取ってきたデータ」をブラウザ側で加工するというのが前提の回答です。質問にあった「Djangoのテンプレートシステムは、サーバー側で処理されるものなので、Ajaxにおいては作動しないと思います」はその通りと思いますので。

質問に対するコメントに書いたように、サーバーから送信されてくる JSON 文字列の内容を見直すべきと思いますが（少なくとも "language":2 は "language":"英語" というように）、とりあえず、今の質問の形のままで name, language を取得するコードを以下に書いておきます。

<script type="text/javascript">
    //<![CDATA[
    window.onload = function () {
        // サーバーから送られてくる JSON 文字列は以下ではなくて、
        //var jsonString = '{"types":[' +
        //    '{"model":"test.type","pk":1,"fields":{"language":2,"name":"sampleA"}},' +
        //    '{"model":"test.type","pk":2,"fields":{"language":2,"name":"sampleB"}},' +
        //    '{"model":"test.type","pk":3,"fields":{"language":2,"name":"sampleC"}}' +
        //    ']}';

        // 質問者さんの回答からサーバーから送られてくる JSON 文字列は以下のようになっていると理解
        var jsonString = '{"types":"' + 
            '[{\\"model\\":\\"test.type\\",\\"pk\\":1,\\"fields\\":{\\"language\\":2,\\"name\\":\\"sampleA\\"}},' +
            '{\\"model\\":\\"test.type\\",\\"pk\\":2,\\"fields\\":{\\"language\\":2,\\"name\\":\\"sampleB\\"}},' +
            '{\\"model\\":\\"test.type\\",\\"pk\\":3,\\"fields\\":{\\"language\\":2,\\"name\\":\\"sampleC\\"}}]' + 
            '"}';

        // 質問者さんの jQuery ajax のコードで done には JSON 文字列がパースされた JavaScript
        // オブジェクトが代入されるはず
        var data = JSON.parse(jsonString);

        // 質問者さんのコードの通り data.types で質問に書いてあった JSON 文字列が取得できる
        $('div.json').append(data.types);

        // その JSON 文字列をパースして JavaScript オブジェクトを取得し
        // それから name, language を取得
        var jsObjects = JSON.parse(data.types);
        $.each(jsObjects, function (index, jsObject) {
            $('#output').append(
              '<p>' + jsObject.fields.name + '<br />' +
              jsObject.fields.language  + '</p>');
        });
    };
    //]]>
</script>

結果は以下の通りです。青枠の部分が上のコードの $('div.json').append(data.types); の結果、赤枠の部分が $.each(jsObjects, function (index, jsObject) { ... }); の結果です。

投稿2019/09/25 02:02

編集2019/09/25 02:42

退会済みユーザー

総合スコア0

退会済みユーザー

2019/09/25 03:07

大変分かりやすくご回答頂き、ありがとうございました。サーバー側でデータを取り纏め、jquery側でそれを表示できるようにしたいと思います。 each、json.parseを使えばよいのですね。

退会済みユーザー

2019/09/25 03:14

サーバーから送信される JSON 文字列を見直せば json.parse は使わなくて済むようにできると思います。例えば、上の回答に書いた JSON 文字列でコメントアウトした方のようにすれば、data.types は JavaScript オブジェクトになるので、$.each(data.types, function (index, jsObject) { ... }); で name, language を表示できます。

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