How to create models dropdown menu in django

Question

i created two model name categories and subcategories by which if i create a category name merch so under that i can create sub categories name t shirt, hoddies, shirt so i linked categories with foreign key in subcategories so i want to render a dropdown menu in which on top categories will show up and under that all the sub categories related to categories but i am unable to achieve that i tried this

my models.py

class Categories(models.Model):
    name = models.CharField(max_length=100, blank=False)
    joined_date = models.DateTimeField(default=timezone.now,editable=False)
    update_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

class Subcategories(models.Model):
    categories = models.ForeignKey(Categories, on_delete=models.CASCADE)
    name = models.CharField(max_length=200, blank=False)
    joined_date = models.DateTimeField(default=timezone.now,editable=False)
    update_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

and my views.py

class home(View):
    def get(self, request,):
        category_list = Categories.objects.all()
        return render (request, 'home.html', {'category_list': category_list })

and my html

<ul class="navbar-nav m-auto">
              {% for category in category_list  %}
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle category" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  {{ category.name }}
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item text-white" href="#"></a></li>
                </ul>
              </li>
              {% endfor %}

my urls.py

path('',home.as_view(),name='home' ),

what it does it load the categories name but unable to subcategories name under the dropdown menu

here is the pic for you better understanding

score 1 · Accepted Answer · answered Jul 25 '21 at 19:36

1

Try to set related_name = our_categories in categories foreignKey then in html file set:

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      {% for item in category.our_categories.all %} 
            <li><a class="dropdown-item text-white" href="#"></a> {item.name} </li>
      {% endfor %}
</ul>

answered Jul 25 '21 at 19:36

Mohamed Hamza

945
1
5
15

it worked bro thanks will you please sumarised a bit it will be great – Shreyash mishra Jul 26 '21 at 09:27
Yes, what is the `related_name` mean? It is the name of the reverse relation between two models. In the first loop `{% for category in category_list %}` we fetch all `Categories` in our db, then in the second loop we use `relate_name` to give us all `Subcategories` that belong to this `Category` [This will help you to understand it better](https://stackoverflow.com/questions/2642613/what-is-related-name-used-for-in-django) – Mohamed Hamza Jul 26 '21 at 11:22

How to create models dropdown menu in django

1 Answers1