[PYTHON] Show Django ManyToManyField in Template

Introduction

In this article, I will write how to display what is connected by ManyToManyField in Template.

Model confirmation

Let's check the model first.

models.py

class Kadai(models.Model):
    class Meta:
        verbose_name = 'Task'
        verbose_name_plural = 'Task'

    kadai_name = models.CharField(
        verbose_name='Issue name',
        max_length=100,
        unique=True,
    )

    category_number = models.IntegerField(
        verbose_name='Number of issue categories',
        default=0,
    )

    kadai_thumbnail = models.ImageField(
        verbose_name='Thumbnail image',
        upload_to='media',
    )

    def __str__(self):
        return self.kadai_name


class KadaiCategory(models.Model):
    class Meta:
        verbose_name = 'Issue category'
        verbose_name_plural = 'Issue category'

    kadai_name = models.ManyToManyField(Kadai)

    category_name = models.CharField(
        verbose_name='Category name',
        max_length=100,
        unique=True
    )

    kadai_number = models.IntegerField(
        verbose_name='Number of tasks',
        default=0
    )

    category_thumbnail = models.ImageField(
        verbose_name='Thumbnail image',
        upload_to='media',
    )

    def __str__(self):
        return self.category_name

Check HTML file

This is the big picture, but it's long, so I'll shorten it a little.

models.py

class Kadai(models.Model):
    class Meta:
        verbose_name = 'Task'
        verbose_name_plural = 'Task'

    kadai_name = models.CharField(
        verbose_name='Issue name',
        max_length=100,
        unique=True,
    )

    .
    .
    .

    def __str__(self):
        return self.kadai_name


class KadaiCategory(models.Model):
    class Meta:
        verbose_name = 'Issue category'
        verbose_name_plural = 'Issue category'

    kadai_name = models.ManyToManyField(Kadai)

    category_name = models.CharField(
        verbose_name='Category name',
        max_length=100,
        unique=True
    )

    .
    .
    .

    def __str__(self):
        return self.category_name

This makes it a little easier to see. For the moment, the "Kadai" class has some challenges, and the "Kadai Category" class has several categories. In other words, because it is "many-to-many", I am using ManyToManyField. Now let's look at the Template. This HTML file is connected to "Kadai Category".

kadai_category.html

{% 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="This is a thumbnail image.">
             <div class="card-body">
                  <h5 class="card-title">{{ category.category_name }}</h5>
                  <p class="card-text">Check your skills and improve your skills!</p>
                  <p>/{{ category.kadai_number }}</p>
                  <a href="#" class="btn btn-primary">Let's Challenge</a>
            </div>
       </div>
   </div>
{% endfor %}

In this state, it is only displaying what is written in Model, and it is not possible to display the model of the "Kadai" class connected by ManyToManyField. So how can you display the "Kadai" class models that are connected by ManyToManyFielf? The answer is this.

kadai_category.html

{% for kadai in category.kadai_name.all %}
   <p>{{ kadai.kadai_name }}</p>
{% endfor %}

Let's take a look at the big picture.

kadai_category.html

{% 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="This is a thumbnail image.">
             <div class="card-body">
                  <h5 class="card-title">{{ category.category_name }}</h5>
                  <p class="card-text">Check your skills and improve your skills!</p>
                  <p>/{{ category.kadai_number }}</p>
                 #Add here
                 {% 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 %}

I will explain how to write it. Please understand while looking at the big picture above.

{%for counter variable (any name is acceptable) in the counter variable part of a large for statement.Variable names connected by ManyToManyField.all %}
   <p>{{Counter variable.Variable of the model you want to load after connecting with ManyToManyField}}</p>
{% endfor %}

Finally

I don't know if it's well communicated, but please compare and reflect it in your project.