HTML: Препроцессор Pug
2026-02-26 22:46 Diff
https://ru.hexlet.io/courses/html-pug/lessons/iteration/theory_unit

В уроке про условные конструкции был использован объект с данными пользователя Кодовёнка Хекслетовича:

При обращении к полям объекта использовалась схема объект.ключ. Таким способом были получены данные об имени, фамилии и логине пользователя:

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

Задача легко решается, если необходимо вывести одного пользователя. А что же делать, если пользователя 2? 3? 100? Есть два способа:

  1. Плохой: записать каждого пользователя в свою переменную и методом «копировать-вставить» добавить всех пользователей.
  2. Хороший: создать массив users, внутри которого будут все пользователи. Таким образом каждому пользователю будет выделено своё место в массиве, а значит можно удобно добавлять или удалять пользователей.

Создадим массив users и добавим туда несколько разных пользователей:

Для обхода такого массива используются специальные конструкции — циклы. Их задача — пройтись по каждому элементу массива и получить информацию внутри него. Проход по элементам называется итерацией. Во время первой итерации будут получены данные Кодовёнка Хекслетовича. Во время второй итерации данные Короля Вёрстки.

Основным типом цикла в Pug считается цикл each in. Буквально его можно читать как для каждого «a» внутри «b». Где:

  • «a» — произвольное имя переменной, которая будет доступна во время итерации.
  • «b» — массив или объект, из которого необходимо получить данные.

Главное изменение произошло добавлением всего одной строки: each user in users. Запись читается следующим образом: для каждого user в массиве users и далее вывод табличной строки с данными.

Важно: вы можете присвоить любое имя переменной, которая будет доступна внутри цикла. В прошлом примере таким именем может быть не user, а people или как-то иначе. Только вы выбираете это имя, но старайтесь называть его так, чтобы было понятно, что кроется за этим названием. Если код внутри цикла большой, то именно от именования зависит то, как быстро и точно будет интерпретирован код вами или другим разработчиком.

Подробнее можно почитать в статьях:

Нельзя точно быть уверенным, что массив, по которому будет происходить перебор имеет хоть один элемент. Если нет ни одного элемента, то всё, что внутри массива не будет выведено. В этот момент пользователю важно знать, что информации нет, а не возникла ошибка на странице. Для этого можно использовать конструкцию each else. Это схоже с условной конструкцией, но срабатывает только при пустом массиве.

Код из прошлого примера эквивалентен следующей записи:

Вложенные циклы и получение ключа объекта

При переборе объекта бывает необходимо получить не только значение, но и ключ, по которому располагается объект. Например, пользователи могут делиться на разные группы: пользователи, модераторы, администраторы. В таком случае объект может иметь следующий вид:

Объект users имеет несколько ключей: admin и moderator, значением которых являются массивы пользователей. Для вывода такого списка вместе с указанием должности используется немного изменённый синтаксис цикла each. В нём необходимо получить имя ключа и массив.

Из объекта users принимаются несколько данных: в переменную people попадает значение, а в переменную position ключ. Обратите внимание на порядок переменных — вначале данные, а потом ключ.

В этом примере используется вложенный цикл. Такая практика является стандартным для обхода больших данных. При первой итерации в верхнем цикле вытаскиваются следующие данные:

В дальнейшем идет перебор по массиву people, который происходит так же, как и в примере выше.

Цикл while

Цикл each по праву считается основным при работе с Pug, но он не является единственным. Встречаются ситуации, когда необходимо несколько раз повторить одни и те же действия. В этом случае each никак не поможет, но в Pug существует ещё один тип цикла — while. Его задача — повторение участка кода пока истинно условие. Например,

При использовании цикла while важно следить за тем, чтобы условие рано или поздно преобразовалось в ложь. Это частая ошибка, которая может привести к бесконечному циклу. В прошлом примере для получения бесконечного цикла достаточно опустить строку count += 1;. Без неё значение переменной count всегда будет равно нулю, а значит условие count < 5 будет истинным в любой момент времени компиляции.

Дополнительное задание

В файл icon.pug попадает массив следующего вида:

Преобразуйте данные в шаблон следующего вида: