Magicode logo
Magicode
0
5 min read

Django ManyToManyFieldをTemplateに表示

https://cdn.apollon.ai/media/notebox/blob_zPZGNMR
#はじめに 今回の記事ではManyToManyFieldで繋いだものをTemplateに表示する方法を書いていきます。
#モデルの確認 まずモデルを確認しましょう。
class Kadai(models.Model):
    class Meta:
        verbose_name = '課題'
        verbose_name_plural = '課題'

    kadai_name = models.CharField(
        verbose_name='課題名',
        max_length=100,
        unique=True,
    )

    category_number = models.IntegerField(
        verbose_name='課題カテゴリ数',
        default=0,
    )

    kadai_thumbnail = models.ImageField(
        verbose_name='サムネイル画像',
        upload_to='media',
    )

    def __str__(self):
        return self.kadai_name


class KadaiCategory(models.Model):
    class Meta:
        verbose_name = '課題カテゴリ'
        verbose_name_plural = '課題カテゴリ'

    kadai_name = models.ManyToManyField(Kadai)

    category_name = models.CharField(
        verbose_name='カテゴリ名',
        max_length=100,
        unique=True
    )

    kadai_number = models.IntegerField(
        verbose_name='課題数',
        default=0
    )

    category_thumbnail = models.ImageField(
        verbose_name='サムネイル画像',
        upload_to='media',
    )

    def __str__(self):
        return self.category_name
#HTMLファイルの確認
これが全体像ですが、長いので少し短くします。
class Kadai(models.Model):
    class Meta:
        verbose_name = '課題'
        verbose_name_plural = '課題'

    kadai_name = models.CharField(
        verbose_name='課題名',
        max_length=100,
        unique=True,
    )

    .
    .
    .

    def __str__(self):
        return self.kadai_name


class KadaiCategory(models.Model):
    class Meta:
        verbose_name = '課題カテゴリ'
        verbose_name_plural = '課題カテゴリ'

    kadai_name = models.ManyToManyField(Kadai)

    category_name = models.CharField(
        verbose_name='カテゴリ名',
        max_length=100,
        unique=True
    )

    .
    .
    .

    def __str__(self):
        return self.category_name
これで少しは見やすくなりました。 一応説明しておくと、「Kadai」クラスは課題がいくつかあり、「KadaiCategory」クラスにはカテゴリがいくつかあります。 つまり、「多対多」なのでManyToManyFieldを使っています。 それでは早速Templateの方を見ていきましょう。 このHTMLファイルは、「KadaiCategory」つつながっています。
{% for category in object_list %}
   <div class="col-4 one-card">
        <div class="card" style="width: 18rem;">
             <img src="{{ category.category_thumbnail.url }}" height="300" alt="サムネイル画像です。">
             <div class="card-body">
                  <h5 class="card-title">{{ category.category_name }}</h5>
                  <p class="card-text">スキルチェックをして自分のスキルを上げていきましょう!</p>
                  <p>/{{ category.kadai_number }}</p>
                  <a href="#" class="btn btn-primary">Let's Challenge</a>
            </div>
       </div>
   </div>
{% endfor %}
この状態だとただModelに書かれていることを表示しているだけで、ManyToManyFieldでつながっている「Kadai」クラスのモデルを表示できていません。 ではどのようにしたらManyToManyFielfでつながっている「Kadai」クラスのモデルを表示できるのでしょうか? 答えはこのようにします。
{% for kadai in category.kadai_name.all %}
   <p>{{ kadai.kadai_name }}</p>
{% endfor %}
全体像を見てみましょう。
{% for category in object_list %}
   <div class="col-4 one-card">
        <div class="card" style="width: 18rem;">
             <img src="{{ category.category_thumbnail.url }}" height="300" alt="サムネイル画像です。">
             <div class="card-body">
                  <h5 class="card-title">{{ category.category_name }}</h5>
                  <p class="card-text">スキルチェックをして自分のスキルを上げていきましょう!</p>
                  <p>/{{ category.kadai_number }}</p>
                 # ここに追加
                 {% for kadai in category.kadai_name.all %}
                    <p>{{ kadai.kadai_name }}</p>
                 {% endfor %}
                  <a href="#" class="btn btn-primary">Let's Challenge</a>
            </div>
       </div>
   </div>
{% endfor %}
書き方を説明します。上の全体像をみつつ理解してください。
{% for カウンタ変数(どんな名前でも良い) in 大きなfor文のカウンタ変数部分.ManyToManyFieldで繋いでいる変数名.all %}
   <p>{{ カウンタ変数.ManyToManyFieldで繋いだ先の読み込みたいモデルの変数}}</p>
{% endfor %}
#最後に しっかり伝わっているかわかりませんが、見比べながら自分のプロジェクトに反映させていってください。

Discussion

コメントにはログインが必要です。