Django Template extract list

April 13, 2022

I have a list:

productlinks = [google.com, tes.com, lol.com]
prices = [$134, $123,$123]

I wanna extract those list to my django template inside the bootsrap. Here is my django template code:

<section class="py-5">
        <div class="container px-4 px-lg-5 mt-5">
            <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                {% for link in productlinks %}
                <div class="col mb-5">
                    <div class="card h-100">
                        <!-- Product image-->
                        <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
                        <!-- Product details-->
                        <div class="card-body p-4">
                            <div class="text-center">
                                <!-- Product name-->
                                <h5 class="fw-bolder">Fancy Product</h5>
                                <!-- Product price--> x  
                                $40.00 - $80.00 -> price must be here using loop to extract the list
                            </div>
                        </div>
                        <!-- Product actions-->
                        <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                            
                            <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

So basically, I wanna also extract the prices list but i dont know how to place the loop after the my productlinks loop. Because it will ruins the result.

and here is my views code:

return render(request, '/home.html', {
            'productlinks': productlinks,
            'prices': productprices
            }
        )

>Solution :

views

return render(request, '/home.html', {
            'data': zip(productlinks,productprices)
            }
        )

template

<section class="py-5">
        <div class="container px-4 px-lg-5 mt-5">
            <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                {% for link,price in data %}
                <div class="col mb-5">
                    <div class="card h-100">
                        <!-- Product image-->
                        <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
                        <!-- Product details-->
                        <div class="card-body p-4">
                            <div class="text-center">
                                <!-- Product name-->
                                <h5 class="fw-bolder">Fancy Product</h5>
                                <!-- Product price--> x  
                                {{ price }}
                            </div>
                        </div>
                        <!-- Product actions-->
                        <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                            
                            <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ link }}" target="_blank">View options</a></div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>