Как отобразить список продуктов, которые были отфильтрованы и получены в js в Django?
Я пытаюсь сделать фильтр на моем сайте. Итак, я получаю значение выбора пользователя, извлекаю его и отправляю в функцию view. В моей функции view я отфильтровал продукты. Я могу видеть результат в консоли, но не могу отобразить его на веб-странице. Поэтому, может ли кто-нибудь помочь мне отобразить отфильтрованные продукты на моей веб-странице. html
<div class="table__menu">
<div class="swiper table__filter-top-menu">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
{% for productT in product_types %}
<div class="swiper-slide">
<a href="#" class="table__btn" data-type="ocean" data-product="{{productT.id}}" >{{productT}}</a><!--{% url 'category_detail' productT.slug %}-->
</div>
{% endfor %}
</div>
</div>
<a id="filter-icon" href="#" class="table__filter-icon table__filter-icon--hidden">
<picture><source srcset="{% static 'img/Filter.svg'%}" type="image/webp"><img src="{% static 'img/Filter.svg'%}" alt=""></picture>
</a>
</div>
<div id="filter-menu" class="table__filter">
<div class="table__col">
<span>
Виды:
</span>
<ul class="table__filter-menu table__filter-menu--types">
{% for category in categories %}
<li class="table__filter-item "><a href="#" data-product = "{{category.id}}" class="table__filter-btn vid-product">{{category.title}}</a></li>
<li class="table__filter-item "><a href="#" data-product = "{{category.id}}" class="table__filter-btn vid-product">{{category.title}}</a></li>
{% endfor %}
</ul>
</div>
<div class="table__col">
<span>
Пол:
</span>
<ul class="table__filter-menu">
{% for i in gender %}
<li class="table__filter-item"><a href="#" class="table__filter-btn gender" data-product="{{i.id}}">{{i}}</a></li>
{% endfor %}
</ul>
</div>
</div>
js
function Filter(productTId,productVId,genderId){
var gender = document.querySelector('.table__filter-btn--active')
console.log(gender)
var productV = document.querySelector('.table__filter-btn--active-1')
var productT = document.querySelector('.table__btn--active')
if (gender){
var genderId=gender.dataset.product
}else{
genderId=0
}
if (productT){
var productTId = productT.dataset.product
}else{
productTId=0
}
if (productV){
var productVId = productV.dataset.product
}else{
productVId=0
}
var url = '/filter/'
fetch(url, {
method:'POST',
headers:{
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'productTId':productTId, 'productVId':productVId,'genderId':genderId})
})
.then((data) => {
//location.reload()
})
}
views.py
def Filter(request):
data = json.loads(request.body)
productTId = data['productTId']
productVId = data['productVId']
genderId = data['genderId']
print(productTId,genderId,productVId)
gender = get_object_or_404(Gender, id=genderId)
productVId = get_object_or_404(Category, id=productVId)
productTId = get_object_or_404(ProductType, id=productTId)
print(productTId,genderId,productVId)
products = Product.objects.filter(typeP=productTId).filter(category=productVId).filter(Gender=genderId)
print(products)
return JsonResponse('Item was added', safe=False)
This code is working on the console.But, I want to display filtered products on the webpage.