Django получить все изображения (которые ForeignKey=Product) при ajax запросе

Всем привет!

Сразу к делу)

При получении массива в get запросе невозможно получить все изображения так, это есть в стандартной ситуации.

код models.py:

class Product(models.Model):
    ...

class ProductImage(models.Model):
    product = models.ForeignKey(Product, blank=True, related_name="image", null=True, default=None,
                            on_delete=models.CASCADE)
    image = models.ImageField(upload_to='product_images/')

код views.py:

class ProductsNewJsonListView(View):
def get(self, *args, **kwargs):
    upper = kwargs.get('num_products')
    lower = upper - 4
    items = list(Product.objects.filter(new_product=True).values()[lower:upper])
    product_len = len(Product.objects.all().filter(new_product=True))
    max_size = True if upper >= product_len else False
    return JsonResponse({'data': items, 'max': max_size}, safe=False)

в стандартной ситуации мы получаем, к примеру, урл первого изображения в шаблоне так:

{{ product.image.product.image.all.first.image.url }}

Но как же получить такой же результат при ajax запросе?

const handleGetData = () => {
$.ajax({
type: 'GET',
url: `/new_json/${visible}/`,
success: function (response) {
    // console.log(response.max)
    const data = response.data
    spinnerBox.classList.remove('not-visible')
    setTimeout(()=>{
        spinnerBox.classList.add('not-visible')
        data.map(product=>{
            console.log(product.id)
            productBox.innerHTML += `<div class="col-6">
            <a href=""><img src="---вот сюда---">
                <div class="list_title">${product.product_name_site}</div>
                <div class="product-price list_price"><span>₴${product.product_price}</span></div>
            </a>
        </div>`
        })
    }, 500)
},
    error: function (error) {
        console.log(error)
    }
})

}

Буду очень признателен за помощь! Заранее спасибо!=)

Вернуться на верх