HTML: Preprocessor Pug
2026-02-21 02:51 Diff
https://hexlet.io/courses/html-pug/lessons/iteration/theory_unit

In the lesson about conditional constructs, we used an object with data belonging to a user called Hexlet McCoderson:

We used object.key when accessing the object fields to get data on the name and username of the user:

Let us modify the task and add the number of points and all the data to the table. It helps to display the user in the learner rankings:

This task is easy if you need to output a single user. But what if there are hundreds of users? There are two ways:

  1. Bad: Write each user to their variable and add all users with the classic copy-and-paste method
  2. Good: create an array of users with all users inside it. Every user will be allocated their place in the array, making it convenient to add or delete users

We can use constructs called loops to traverse such an array. They go through each array element and get the information inside it.

Passing through the elements is called iteration. In the first iteration, you'll find Hexlet McCoderson's data. In the second iteration, you'll get Layout O'Design's data.

The main type of loop in Pug is the each in, meaning for every an inside b:

  • a is an arbitrary variable name available during iteration
  • b is the array or object you want to retrieve the data

We changed one line: each user in users. We read it as follows: for each user in the user's array and then output a tabular string with the data.

You can assign any name to the variable that will be accessible inside the loop. The name might not be user, it could be people or something else. You can choose any name that accurately represents the content.

If the code inside the loop is large, the naming determines how quickly and accurately the code will be interpreted by you or another developer. You can read more in these articles:

You can't be sure the array we search has at least one element. The array's content won't be output If there are no elements.

At this point, the user needs to know that there is no data, so they don't think there is an error with the page. It is what the `each else' is for. It is similar to the conditional construct but only works if the array is empty:

The code from the last example is equivalent to the following:

Nested loops and getting the object key

When going through an object, you sometimes have to get the value and the key in the object's location. For example, we can divide users into different groups: users, moderators, administrators, and so on. The object may have the following form in this case:

The users have several admin and moderator keys, which values are arrays of users. We can use a slightly modified each loop syntax to output this list with job titles. We need to get the key name and the array in it:

We take several pieces of data from the users object: the people variable gets the value, and the position variable gets the key. Pay attention to the order of the variables: the data first and then the key.

This example uses a nested loop which is standard for traversing big data. The first iteration in the top loop pulls the following data:

The next step is to search through the people array, which we do in the same way as in the example above:

While loop

When we work with Pug, we consider the each cycle the main one, but it isn't the only one.

There are situations when we repeat the same actions several times. In this case, each doesn't help, but there is another loop type – while. It repeats a code section while the condition is true. For example:

When we use the while, we should check that the condition changes to false sooner or later. It is a common mistake that can lead to an endless loop. In the last example, you should use count += 1; to get an infinite loop. Without it, the value of count will always be zero, meaning that the condition count < 5 will be true at any point during compilation.

Additional assignment

The following kind of array goes into the icon.pug:

Convert the data into the following template: