Шаблон Django, вложенный в цикл for из 2 разных списков

У меня есть 2 списка (если django так их называет), содержащие идентификатор и пару ключ/значение, например [{'id': x, 'string': 'string'}] один список назначен переменной 'periods', другой - 'paydates'.

Я пытаюсь пройтись по каждому списку и отобразить значение из каждого в HTML-элементе, используя DTL.

У меня в HTML-странице DTL {% for ... in ... %} один внутри другого. Внешний цикл for из списка 'periods' работает правильно, внутренний цикл for из списка 'paydates' вообще ничего не выводит, ошибку тоже не выдает.

Where the data is to be displayed

Синяя дата на рисунке взята из списка 'periods' и работает правильно, дата из списка 'paydates' должна отображаться под 'Pay Date'.

Я не могу разделить код цикла for из-за того, как я хочу, чтобы отображалась моя html-страница. Я не уверен, какие у меня есть варианты решения этой проблемы.

Мой код выглядит следующим образом:

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)
]

Я не знаю, можно ли объединить эти 2 списка и извлечь соответствующие данные и поместить их в нужный элемент, я новичок в django и программировании в целом. Надеюсь, это простое решение.

Моя благодарность заранее.

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.

Вернуться на верх