Django not showing dynamic list content
Question
I am making a website where I show off the specs of each product using flip cards and I have django is as the backend. I was trying to make the specs dynamic using jinja format but everytime I try to put my multiple objects in list it messes the code up.
views.py before
def prodospecs(request):
product1 = product()
product1.name = 'iPhone 12 Pro 5G'
product1.screen = '6.1" Super Amoled Display 60hz'
product1.chipset = 'A14'
product1.camera = 'Triple Camera Setup (UltraWide, Telephoto, Wide)'
product1.special = 'New Design'
product1.price = 999
product2 = product()
product2.name = 'S21 Ultra 5G'
product2.screen = '6.8" Amoled Display 120hz'
product2.chipset = 'Snapdragon 888, Exynos 2100'
product2.camera = 'Quad Camera Setup (UltraWide, 2 Telephoto, Wide)'
product2.special = 'New Camera Design and S-Pen Support'
product2.price = 1199
product3 = product()
product3.name = 'Asus Zenbook Duo'
product3.screen = '14 inch 16:9'
product3.chipset = 'i5 or i7'
product3.camera = '720p Webcam'
product3.special = 'Two Displays'
product3.price = 999
return render(request, 'prodospecs.html', {'product1' : product1,'product2' : product2, 'product3' : product3 })
And this one works and shows all the information necessary
views.py after
def prodospecs(request):
product1 = product()
product1.name = 'iPhone 12 Pro 5G'
product1.screen = '6.1" Super Amoled Display 60hz'
product1.chipset = 'A14'
product1.camera = 'Triple Camera Setup (UltraWide, Telephoto, Wide)'
product1.special = 'New Design'
product1.price = 999
product2 = product()
product2.name = 'S21 Ultra 5G'
product2.screen = '6.8" Amoled Display 120hz'
product2.chipset = 'Snapdragon 888, Exynos 2100'
product2.camera = 'Quad Camera Setup (UltraWide, 2 Telephoto, Wide)'
product2.special = 'New Camera Design and S-Pen Support'
product2.price = 1199
product3 = product()
product3.name = 'Asus Zenbook Duo'
product3.screen = '14 inch 16:9'
product3.chipset = 'i5 or i7'
product3.camera = '720p Webcam'
product3.special = 'Two Displays'
product3.price = 999
prods = [product1, product2, product3]
return render(request, 'prodospecs.html', {'products': prods})
While this one doesn't show any information
prodospecs.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listen to Talk Tech Teen Tech</title>
<link rel="stylesheet" href="{% static 'prodospecs.css' %}">
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li class = "logo"><img src="{% static 'images/icon-1.png' %}"></li>
<li><a href = "index" class = "link" style = "text-decoration: none;">Home</a></li>
<li><a href = "listen" class = "link" style = "text-decoration: none;">Listen</a></li>
<li><a href = "prem" class = "link" style = "text-decoration: none;">Premium Techy</a></li>
<li class = "active">Product Specs</li>
<li><a href = "contact" class = "link" style = "text-decoration: none;">Contact</a></li>
<li><a href ="signup" class ="signup-btn"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="title">
<h1>Product Specs</h1>
<p>The list of important specs for each product that we talk about on Talk Tech Teen Tech</p>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product1.name}}</h1>
<p>{{product1.screen}}</p>
<p>{{product1.chipset}}</p>
<p>{{product1.camera}}</p>
<p>{{product1.special}}</p>
<p>Price: ${{product1.price}} USD</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/s21ultra.png' %}" alt="s21" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product2.name}}</h1>
<p>{{product2.screen}}</p>
<p>{{product2.chipset}}</p>
<p>{{product2.camera}}</p>
<p>{{product2.special}}</p>
<p>Price: ${{product2.price}} USD</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/zenbookduo.png' %}" alt="s21" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product3.name}}</h1>
<p>{{product3.screen}}</p>
<p>{{product3.chipset}}</p>
<p>{{product3.camera}}</p>
<p>{{product3.special}}</p>
<p>Price: ${{product3.price}} USD</p>
</div>
</div>
</div>
</body>
Any help would be greatly appreciated
3 answers
solution1
0 ACCPTED 2021-03-08 06:43:51
You want to be looping over the products:
{% for product in products %}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
</div>
</div>
</div>
{% endfor %}
solution2
0 2021-03-08 06:58:24
in prodospecs.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listen to Talk Tech Teen Tech</title>
<link rel="stylesheet" href="{% static 'prodospecs.css' %}">
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li class = "logo"><img src="{% static 'images/icon-1.png' %}"></li>
<li><a href = "index" class = "link" style = "text-decoration: none;">Home</a></li>
<li><a href = "listen" class = "link" style = "text-decoration: none;">Listen</a></li>
<li><a href = "prem" class = "link" style = "text-decoration: none;">Premium Techy</a></li>
<li class = "active">Product Specs</li>
<li><a href = "contact" class = "link" style = "text-decoration: none;">Contact</a></li>
<li><a href ="signup" class ="signup-btn"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="title">
<h1>Product Specs</h1>
<p>The list of important specs for each product that we talk about on Talk Tech Teen Tech</p>
</div>
{% for product in products %}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
solution3
0 2021-03-08 07:17:25
You need to add some special tags {% for ... in ... %} and {{ variable }}. They are part of the Django Template Language. This for loop will iterate over a list of objects using a for. The {{ product.<field name> }} renders the name of the product in the HTML template, generating a dynamic HTML document.
Your answer:
{% for product in products %}
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
{% endfor %}
One small Suggestion(for code optimisation): Instead of creating a product object in views ,Its better to create those objects in models.py like below
**Models.py:**
class Product(models.Model):
name = models.CharField(max_length=30, unique=True)
screen= models.CharField(max_length=100)
chipset= models.CharField(max_length=100)
camera= models.CharField(max_length=100)
special= models.CharField(max_length=100)
price= models.DecimalField(max_digits=6, decimal_places=2)
def __str__(self):
return self.name
Open the Command Line Tools, activate the virtual environment, go to the folder where the manage.py file is, and run the commands below:
python manage.py makemigrations
As an output you will get something like this:
Migrations for 'products':
boards/migrations/0001_initial.py
- Create model Product
- Add field name to Product
- Add field screen to Product
- Add field chipset to Product
- Add field camera to Product
- Add field special to Product
- Add field price to Product
At this point, Django created a file named 0001_initial.py inside the app/migrations directory. It represents the current state of our application’s models. In the next step, Django will use this file to create the tables and columns.
The next step now is to apply the migration we generated to the database:
python manage.py migrate
After this go to /admin and create your products there.
That’s it! Your Product objects is ready to be use.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dynamic number of list is showing errorin django pagination?
Content of database not showing up in Django
Dropdowns Django with dynamic list
Error while showing dynamic form on Django
Content not showing up on detailed view in Django
Django Title Block Showing on Page Content
A 'related content' list with DetailView in Django
Generating CSV file with Django (dynamic content)
How to send html email with django with dynamic content in it?
Render dynamic value inside content django template
Related Tags