Многомерные коллекции в шаблонах Django

Данные в шаблоне часто бывают вложенными: словарь внутри словаря, список внутри словаря и так далее. К таким данным обращаются цепочкой через точку. Давайте разберем несколько примеров.

Пример 1

Пусть у нас в представлении есть функция:

from django.shortcuts import render

def page(request):
    return render(request, 'page.html')

Давайте передадим вложенный словарь в представление:

def page(request):
    return render(request, 'page.html', {
        'data': {
            'person': {
                'name': 'Alice',
                'contacts': {
                    'email': 'alice@example.com',
                    'phone': '+123456789',
                },
            },
        },
    })

Давайте выведем элементы нашей структуры в шаблоне:

<div class="profile">
	<h3>{{ data.person.name }}</h3>
	<p>Email: {{ data.person.contacts.email }}</p>
	<p>Phone: {{ data.person.contacts.phone }}</p>
</div>

Пример 2

Пусть у нас в представлении есть функция:

from django.shortcuts import render

def page(request):
    return render(request, 'page.html')

Давайте передадим словарь со списком внутри:

def page(request):
    return render(request, 'page.html', {
        'company': {
            'name': 'Tech Corp',
            'departments': ['IT', 'HR', 'Finance'],
        },
    })

Давайте выведем элементы нашей структуры в шаблоне. К элементам списка обращаются по индексу:

<div class="company-info">
	<h4>{{ company.name }}</h4>
	<p>First: {{ company.departments.0 }}</p>
</div>

Пример 3

Пусть у нас в представлении есть функция:

from django.shortcuts import render

def page(request):
    return render(request, 'page.html')

Давайте передадим список словарей в представление:

def page(request):
    return render(request, 'page.html', {
        'products': [
            {'name': 'Laptop', 'price': 1000},
            {'name': 'Mouse', 'price': 25},
        ],
    })

Давайте выведем элементы нашего списка в шаблоне по индексу:

<div class="products">
	<p>Product 1: {{ products.0.name }} - ${{ products.0.price }}</p>
	<p>Product 2: {{ products.1.name }} - ${{ products.1.price }}</p>
</div>

Практические задачи

В представлении объявлена многомерная структура:

data = {
    'person': {
        'name': 'Alice',
        'contacts': {
            'email': 'alice@example.com',
            'phone': '+123456789'
        }
    }
}

Выведите данные из структуры в шаблоне.

В представлении объявлен массив словарей:

products = [
    {'name': 'Laptop', 'price': 1000},
    {'name': 'Mouse', 'price': 25}
]

Выведите данные из массива в шаблоне.

В представлении объявлена сложная многомерная структура:

university = {
    'name': 'State University',
    'faculties': [
        {
            'name': 'Computer Science',
            'students': ['John', 'Mike']
        },
        {
            'name': 'Mathematics',
            'students': ['Anna', 'Kate']
        }
    ]
}

Выведите данные из структуры в шаблоне.