Last Updated: May 30, 2016

Utilizing Iterations to Reduce Code - Jade

Edit: Thanks to ForbesLindesay on Twitter to pointing out that you should use Arrays instead of Objects when order matters, cheers!

Jade is a wonderful Node template engine to help developers not waste so much time typing out HTML code. If you are making website with Node/Express I highly recommend you check out Jade if you have not, or if their syntax does not gel with you take a look at another template engine called EJS (Embedded JavaScrpt templates).

Jade: http://jade-lang.com/
EJS: https://github.com/tj/ejs

Our Problem

Alright, we are going to use a real-life example I just worked through so you can see the benefits of using something like Jade.

Our job is to create an input system so that clients can change their hours of operation. So this means, we need the same input system for Monday - Sunday (I like to start my weeks on Monday, end Sunday. Just a person preference). In normal HTML would would have to code the same block of information seven times, and change the ids/names of the inputs, blocks and whatever else needs to change based on the day of the week. That is very cumbersome to code and isn't easy to read when you are looking at the code.

Let's first take a look how we could tackle this in Jade, without iterations so we can see the problem.

Due to Jade's Indentation, the code does not format correctly inside code blocks on CoderWall, so I am going to use screenshots of my code in Sublime Text 3

All the source code for this ProTip, and my others, can be found on my GitHub in the CoderWall repo. Each folder in the root of the repo is a different ProTip, so look for the folder with the same name as this post.

(I apologize I forgot the #mondayHours portion of the code)

Do you see how bulky this is as we have it right now? And do you notice how each block/day has the same code except for some ids and text changing based on the day of the week? Well, let's use these similarities to our advantage and find a way to iterate one block of code and turn it into what you see here!

Our Solution

Hopefully you are familiar with what iterations are. If not, to summarize, they allow you to run a 'loop' of code for however long you determine. (e.g. do this n amount of times until n = 10.)

So let's set up the iteration for Jade. If you look at Jade's documentation for iterations you can see that we can run an each loop off of an array or object. How do we determine if we need an array or object in this case? The biggest determining factor is that we need this list of days to always be in the same order, and you can't trust an object to keep everything in the same order as you put it in. That means we must use an array.

If you look at the code, you can see that we use the name of the day of the week in all lower case and there is an instance where we need to have the first letter of the day of the week capitalized. So, we will use .toLowerCase() in Jade to change the value of the array, which is capitalized, to all lowercase.

Our first line of code is going to look like:

each day in ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']

Then for redundancy sake, we will set a value inside the each loop called dayLower that will hold the lower case version of the day of the week.

- var dayLower = day.toLowerCase();

So, for each day in the array we defined, we want to run the block of code that follows it (in Jade's syntax, follows it means that is indented into it as a child).

In the block of code we are iterating, day is going to equal the value of the current position in the array (e.g. Monday), and dayLower is going to equal the lowercase version of day (e.g. monday).

Now we need to edit one of the day blocks of code we have in the long version to accept the variables day and dayLower.

Since our ids and our label's for attributes all have the day of the week in them, we need to move them inside Jade's attribute parenthesis ( ... ). Which also means, we have to manually tell jade that we want div containers. (If you just put #idName Jade will assume you want that to be a div with the id idName.)

Once they are inside the attribute ( ... ) we are going to remove the day of the week from the id/for and use normal JavaScript syntax to concatenate the dayLower variable and the rest of the id/for.

div(id=dayLower+"Hours")

We can use that syntax for the rest of the block of code, except for the label. Since we have the contents of the label being a variable, we need to tell Jade that by following label(for=dayLower+"StartTime") immediately with an = sign, a space, and then JavaScript's concatenation syntax.

label(for=dayLower+"StartTime")= day+":"

Following those rules for the rest of the block of code you should get something, if not exactly, this:

See how much nicer that is to look at, and it doesn't take up your whole Jade file. The code is nice and easy to follow due to the iteration, so we still know what is going on.

The finished product on a website, with a little bit of CSS, would look something like this: