I have two lists (if that is what Django calls them) containing an id and a key/value pair e.g. [{'id': x, 'string': 'string'}] one list assigned to variable 'periods' the other assigned to 'paydates'.
I am trying to loop through each list and display the value from each in an HTML element, using DTL.
I have the DTL in the HTML page {% for ... in ... %} one inside the other. The outer for loop from list 'periods' is working correctly, the inner for loop from list 'paydates' is not displaying anything at all, it doesn't throw an error either.
The blue date in the picture is from the 'periods' list and is working correctly. The date from the 'paydates' list is supposed to show underneath 'Pay Date'.
I cannot separate the for loop code, because of the way i want my html page displayed. I am not sure what options I have to rectify the issue.
My code follows:
home.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="{% static 'appmain/style.css' %}" />
<title>Payslip Data</title>
</head>
<body>
<div class="container mx-auto my-10 border rounded-2xl border-4 border-purple-200 p-10 bg-gray-200 shadow-2xl">
<h1 class="text-4xl font-bold mb-15 text-center text-purple-400">Home Page - Payslip Data</h1>
<div class="periods flex flex-wrap gap-30 justify-center">
{% for period in periods %}
<a href="" class="hover:scale-110 duration-500">
<div class="card">
<div class="cardbody bg-gray-500 text-white text-center p-5">
<p class="text-2xl">Pay Date</p>
{% for paydate in paydates %}
<p class="text-2xl text-blue-700">{{paydate.paydate}}</p>
{% endfor %}
</div>
<div class="cardheader text-center bg-purple-200 p-5 shadow-xl">
<p class="text-2xl">Period Commencing</p>
<h2 class="text-blue-700 text-2xl">{{period.period}}</h2>
<p>15/06/2025 - 28/06/2025</p>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</body>
</html>
views.py:
from django.shortcuts import render
from django.http import HttpRequest
from django.http import HttpResponse
periods = [
{'id': 0, 'period': '15/06/2025'},
{'id': 1, 'period': '29/06/2025'},
{'id': 2, 'period': '13/07/2025'},
{'id': 3, 'period': '27/07/2025'},
{'id': 4, 'period': '10/08/2025'},
{'id': 5, 'period': '24/08/2025'},
{'id': 6, 'period': '07/09/2025'},
{'id': 7, 'period': '21/09/2025'},
{'id': 8, 'period': '05/10/2025'},
{'id': 9, 'period': '19/10/2025'},
{'id': 10, 'period': '02/11/2025'},
{'id': 11, 'period': '16/11/2025'},
{'id': 12, 'period': '30/11/2025'},
{'id': 13, 'period': '14/12/2025'},
{'id': 14, 'period': '28/12/2025'},
{'id': 15, 'period': '11/01/2026'},
{'id': 16, 'period': '25/01/2026'},
{'id': 17, 'period': '08/02/2026'},
{'id': 18, 'period': '22/02/2026'},
{'id': 19, 'period': '08/03/2026'},
{'id': 20, 'period': '22/03/2026'},
{'id': 21, 'period': '05/04/2026'},
{'id': 22, 'period': '19/04/2026'},
{'id': 23, 'period': '03/05/2026'},
{'id': 24, 'period': '17/05/2026'},
{'id': 25, 'period': '31/05/2026'},
{'id': 26, 'period': '14/06/2026'}
]
paydates = [
{'id': 0, 'paydate': '02/07/2026'},
{'id': 1, 'paydate': '02/07/2026'},
{'id': 2, 'paydate': '02/07/2026'},
{'id': 3, 'paydate': '02/07/2026'},
{'id': 4, 'paydate': '02/07/2026'},
{'id': 5, 'paydate': '02/07/2026'},
{'id': 6, 'paydate': '02/07/2026'},
{'id': 7, 'paydate': '02/07/2026'},
{'id': 8, 'paydate': '02/07/2026'},
{'id': 9, 'paydate': '02/07/2026'},
{'id': 10, 'paydate': '02/07/2026'},
{'id': 11, 'paydate': '02/07/2026'},
{'id': 12, 'paydate': '02/07/2026'},
{'id': 13, 'paydate': '02/07/2026'},
{'id': 14, 'paydate': '02/07/2026'},
{'id': 15, 'paydate': '02/07/2026'},
{'id': 16, 'paydate': '02/07/2026'},
{'id': 17, 'paydate': '02/07/2026'},
{'id': 18, 'paydate': '02/07/2026'},
{'id': 19, 'paydate': '02/07/2026'},
{'id': 20, 'paydate': '02/07/2026'},
{'id': 21, 'paydate': '02/07/2026'},
{'id': 22, 'paydate': '02/07/2026'},
{'id': 23, 'paydate': '02/07/2026'},
{'id': 24, 'paydate': '02/07/2026'},
{'id': 26, 'paydate': '02/07/2026'}
]
def main(request):
return render(request, 'appmain/home.html', {'periods':periods})
def dates(request):
return render(request, 'appmain/home.html', {'paydates':paydates})
urls.py:
from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
path('', views.main),
path('', views.dates)
]
I don't know if the two lists can be combined and the relevant data extracted and placed in the correct element, I am new to Django and programming in general. Hopefully, it is a simple solution.
