Django: How to fetch data from two models and display it i template?

Question

There are two models Product and ProductImage my code is as follows:

models.py

class Product(models.Model):
   product_name = models.CharField(max_length=100)
   product_weight = models.CharField(max_length=30)

models.py

from django.db.models.signals import post_save, pre_save
from django.dispatch import receiver

_UNSAVED_IMAGEFIELD = 'unsaved_imagefield'

def upload_path_handler(instance, filename):
    import os.path
    fn, ext = os.path.splitext(filename)
    return "images/{id}/{fname}".format(id=instance.product_id, 
    fname=filename)

class ProductImage(models.Model):
   product = models.ForeignKey(Product, on_delete=models.DO_NOTHING)
   image = models.ImageField(upload_to=upload_path_handler, blank=True)

@receiver(pre_save, sender=ProductImage)
def skip_saving_file(sender, instance, **kwargs):
    if not instance.pk and not hasattr(instance, _UNSAVED_IMAGEFIELD):
        setattr(instance, _UNSAVED_IMAGEFIELD, instance.image)
        instance.image = None

@receiver(post_save, sender=ProductImage)
def update_file_url(sender, instance, created, **kwargs):
    if created and hasattr(instance, _UNSAVED_IMAGEFIELD):
        instance.image = getattr(instance, _UNSAVED_IMAGEFIELD)
        instance.save()

views.py

def products(request):
    products = Product.objects.all()
    context = {
        'products' : products
    }

    return render(request, 'products/products.html', context)

products.html

{% if products %}
        {% for product in produucts %}
            <div class="col-sm-5 col-lg-5">
                <div class="equipmentbox">
                    <div class="equipmentimgbox"> <img src="{{"**IMAGE URL HERE**"}}"> </div>
                    <a href="">{{ product.product_name }}</a>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="col-md-12">
            <p>No Products Available</p>
        </div>
{% endif %}

Product table contains product details and ProductImage contains images related to particular product. I have a listing page where I wan to display ProductTitle and Image. How can I fetch image from the other table and display it with product title.

Thanks in advance.

I found the solution using this https://stackoverflow.com/questions/11056844/django-how-to-get-data-connected-by-foreignkey-via-template — user2144041, Apr 25 '20 at 17:59

score 0 · Answer 1 · answered Apr 25 '20 at 18:07

Here is the solution:

{% if products %}
        {% for product in produucts %}
            <div class="col-sm-5 col-lg-5">
                <div class="equipmentbox">
                    <div class="equipmentimgbox"> <img src="{{"product.productimage_set.all.0.image_main.url"}}"> </div>
                    <a href="">{{ product.product_name }}</a>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="col-md-12">
            <p>No Products Available</p>
        </div>
{% endif %}

checkout this question for more details. Django: How to get data connected by ForeignKey via Template?

Django: How to fetch data from two models and display it i template?

1 Answers1