How to HubL : Arrays, Append and Update

Arrays are a form of data structure used to store variables of the same type. By themselves they can be useful for storing already known data that can be looped through and printed to the browser. For example, if we had a list of team member bios we wanted to display we could use an array to store the data and a loop to print them so we only have to write the HTML markup for a bio once. Now say we have a data set stored somewhere else, like a database, but we want to find all the unique items in a column. This is where appending would come in handy; looping through the database data we can use append to send data to an array and use it in our loop to check it against further iterations.

To show how we can use arrays in HubL and change their data we’ll go through an example of outputting a list of popular posts all with unique tags from each other.

Create an Empty Array

To start we need to first declare a variable with an empty array so that we have something to send our data to. In HubL you create a variable using set.

Create For Loop

Once we have our empty array variable we’ll use Hubspot’s blog_popular_posts() function to start a for loop of our most popular posts (the function is limited to 200). We’ll set the blog posts’ data to a variable and then loop through each one using in.

Append Tags to Array

To check if a post in our loop has a unique tag compared to ones already listed we’ll need to append the tags of each listed post to our array. First we’ll create another loop within our post loop to iterate through each tag in a post. To keep our array a bit cleaner and easier to loop through we’ll add an unless statement that tells the loop to append the tag.name unless it is already in our array. Then within our unless statement we run the append function on our array variable using do.

List Posts with Tags Not in the Array

Now we can check our posts’ tags against our array so that only posts with unique tags will be listed. We already have an unless statement checking this for us so all we need to do is add inside of it our HTML markup and our post variables that we want printed to the page.

Oh no! One of our posts has been printed

Create Array to Check for Unique Posts

To fix this problem we’ll create another array! This time we’ll create a key, value array so we can use the update function. This array uses curly brackets instead of the regular ones and takes two arguments, the key and the value. We’ll leave the value empty for now since we’ll be updating it anyway.

Next we’ll set the update function into action within our unless statement using the do command. Instead of being added onto our array our new key and value will overwrite the array, in other words, update it.

Lastly, for this step, we’ll wrap our HTML markup in an if statement that says to only post the content if our current posts’ title is not in our new array. Let’s also move our update function into the if statement so that it doesn’t keep a post from being listed if the previously checked tag was already in our tag array but it has another tag that is unique to it.

Alright! Our post is no longer being listed twice, but we want to use these posts as featured items and there’s way too many. So let’s create another array to use to break our loop after three posts have been listed.

Create Array to Break Loop

Our last array will be another empty one that we’ll append post titles to, although you could use any variable as we’ll just be checking the length of this array. In our already created if statement we’ll add an && to tell it that both expression tests must be met for the post to be listed. After that we write our expression, using the filter |length, to check if our number array is less than or equal to three.

There we go! With three arrays we’ve filtered our most popular posts to three tag unique posts. It’ll make a great featured section for our Hubspot blog to show off the posts our users love.