For loop an array of objects in HubL?

Question

Hi I have some javascript that is generating HTML code into hubspot, my client wants to have an easier access to editing content and I'm trying to set this up with a HubL template. I've found that I can right a for loop to print an array variables but I was curious if I'm able to print an array of objects?

Their code:

{% set languages = ['HTML', 'CSS', 'Javascript', 'Python', 'Ruby', 'PHP,', 'Java'] %}

{% for language in languages %}
 <li>{{ language }}</li>
{% endfor %}

Simplified version of my code:

  { % set episodes = [{
        id: "1",
        name: "Episdoe 1"
    }, {
        id: "2",
        name: "Episdoe 2"
    }, {
        id: "3",
        name: "Episdoe 3"
    }, {
        id: "4",
        name: "Episdoe 4"
    }]
%}

<ul>{% for episode in episodes %}
  <li>{{ episode.id }}</li> 
  <li>{{ episode.name}}</li> 
  {% endfor %}
</ul>

I'm currently getting an error for having the wrong syntax. The error is coming from having the brackets inside the []. I've tried looking on their site and did a bit of google searching but I can't seem to find anything on displaying an array of objects.

Your code is formatted incorrectly: (1) missing commas in your array of objects after `id` key value pairs. (2) extra } after your array and before closing your `{% set %}` statement — Kirk H, Oct 31 '16 at 16:27
Ok I'll fix that but those were actually changes I put in for the sake of the example. The code wasn't working prior to those changes when I was just listing as set episodes = [{ id: "1"}, {id: "2"} ... }]. — Jleibham, Oct 31 '16 at 16:35
I'm sorry, you were correct I had a syntax error of an extra } at the very end that was breaking my code. Thanks for your help :) — Jleibham, Oct 31 '16 at 16:37

Kirk H · Accepted Answer · 2016-10-31T16:47:06.547

Should work! Here's a functional HubL template example using the object/data you provided above (with fixes):

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}">
    {{ standard_header_includes }}
</head>
<body>
    {% set episodes = [
        {
            id: "1",
            name: "Episdoe 1"
        }, 
        {
            id: "2",
            name: "Episdoe 2"
        }, 
        {
            id: "3",
            name: "Episdoe 3"
        }, 
        {
            id: "4",
            name: "Episdoe 4"
        }
    ] %}

    <ul>{% for episode in episodes %}
      <li>{{ episode.id }}</li> 
      <li>{{ episode.name}}</li> 
      {% endfor %}
    </ul>

    {{ standard_footer_includes }}
</body>
</html>

Thank's Kirk! Another quick question if you don't mind. Will I be able to implement this so I can have my client add objects from the "edit page" page? So I can set this to be variables like {% set episodes = [{ id: (id), name: (episode) } Obviously, my syntax is wrong but I want to be able to nest all this information on the page edit so my client doesn't have to muck through this code to add additional episodes. — Jleibham, Oct 31 '16 at 17:00

For loop an array of objects in HubL?

1 Answers1