admin管理员组

文章数量:1401673

I have 2 lists (if that is what django calls them) containg 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 pic 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="/@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 2 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.

My thanks in advance.

I have 2 lists (if that is what django calls them) containg 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 pic 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/@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 2 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.

My thanks in advance.

Share Improve this question asked Mar 23 at 12:07 StipaneStipane 111 bronze badge
Add a comment  | 

1 Answer 1

Reset to default 0

the problem is that you're only passing one of the lists (periods or paydates) to the template at a time because in your urls.py the second path('', views.dates) overwrites the first one (views.main).

So when Django renders home.html, only paydates or periods is available, not both.

try this code

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, 'paydates': paydates})
url.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.main),
]

now both periods and paydates will be available in the template, and the {% for paydate in paydates %} loop will actually have data to iterate over.

本文标签: pythonDjango template nested for loop from 2 different listsStack Overflow