Название подкатегории отображается под каждой категорией

< <

Я делаю CRUD с использованием сериализаторов и внешних ключей и пытаюсь динамически отображать категории и подкатегории, но проблема в том, что Kurta, Dhoti и другие подкатегории отображаются в каждом столбце, но я хочу, чтобы они отображались только в столбце 9-6 wearenter image description here. В настоящее время это выглядит следующим образом.

ниже представлены модели

class Category(models.Model):
    #made changes to category_name for null and blank
    category_name = models.CharField(max_length=30)
    category_description = models.CharField(max_length=30)
    isactive = models.BooleanField(default=True)

class SUBCategories(models.Model):
    category_name = models.ForeignKey(Category, on_delete=models.CASCADE)
    sub_categories_name = models.CharField(max_length=30)
    sub_categories_description = models.CharField(max_length=30)
    isactive = models.BooleanField(default=True)

функция

def shoppingpage(request):
    cat = Category.objects.filter(isactive=True)
    subcat = SUBCategories.objects.filter(isactive=True)
    hm = {'category':cat,'subcategory':subcat}
    return render(request,'polls/shoppingpage.html',hm)

shoppingpage.html

{% for result in category %}
                <div class="col-md-3">
                    <div class="lynessa-listitem style-01">
                        <div class="listitem-inner">
                            <a href="/9-6wear" target="_self">
                                <h4 class="title">{{result.category_name}}</h4>
                            </a>
                            {% for ans in subcategory %}   
                                <ul class="listitem-list">
                                    <li>

                                            <a href="/kurta" target="_self">{{ans.sub_categories_name}}</a>
                                    </li>
                                </ul>
                            {% endfor %}                                      
                        </div>
                    </div>
                </div>  
                {% endfor %}
Вернуться на верх