For loop over passed in data from app to Hubspot

tp00012x
Member

Hello,

 

We are passing in data to Hubspot from our app to send users more customizables emails. 

 

I'm passing a specific value as a list/array (images), but the for loop doesn't interate through the images list that I pass in.

 

<ul>
  {% for image in custom.images %}
  <li>{{ image }}</li>
  {% endfor %}
</ul>

This gives me the following: 

 

["https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525323775/test.jpg",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1489697398/test.jpg",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525714380/test.png",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1516831949/test.png"] 

 

Which is just basically exactly 'custom.images', and not the iterated data.

 

The 'custom' prefix is the way I'm able to access the data I pass in to Hubspot from my Rails app. We pass multiple things, and they display fine, but when I try to do a 'For loop' or 'If' statments, they don't work.

 

In this link it explains how to do for loops, but the data they are iterating over, in the example, is defined in the template. 

<ul>
  {% for images in ['image1', 'image2', 'image3' %}
  <li>{{ images }}</li>
  {% endfor %}
</ul>

This works fine.

 

Why can't I iterate through a list of data that I pass in?

 

Your help will be appreciated.

Anthony

0 Upvotes
12 Replies 12
tjoyce
Recognized Expert | Platinum Partner

Hi @tp00012x - It looks like you haven't quite reached the right index of the object. Try:  

<ul>
  {% for image in custom.images[0] %}
  <li>{{ image }}</li>
  {% endfor %}
</ul>

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

Thank you for your reply. Custom.images is an array/list that we send to Hubspot from our app. Not an object, why would we need to access the first element - custom.images[0]?

 

Anthony

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@tp00012x - Given your output of 

 

["https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525323775/test.jpg",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1489697398/test.jpg",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525714380/test.png",
"https://images.test.com/uploads/product/image/thumb_square/thumb_square_1516831949/test.png"] 

which has the [] brackets around the array, it's showing that the index of the dictionary is 0 and then your array begins (see here). I don't have an answer as to why HubSpot is storing your array at a dictionary index of 0 but, just seeing the output you're providing, that appears to be the culprit of your loop not running through the array of images.

 

You could also debug your dictionary further with the following code:

<ul>
  {% for image in custom.images %}
  <li>{{ image | pprint }}</li>
  {% endfor %}
</ul>

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

{% for image in custom.products_images %}
{{ image | pprint }}
{% endfor %}

I get in the email, the following:

 

(String:[https://images.test.com/uploads/product/image/thumb_square/thumb_square_1489697398/test.jpg, https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525714380/test.png, https://images.test.com/uploads/product/image/thumb_square/thumb_square_1516831949/test.png])
tjoyce
Recognized Expert | Platinum Partner

Ahhhh, @tp00012x - That's starting to make more sense. Your array is a string. You might try using this filter 

{% set images = custom.products_images|split(',', 4) %}
{% for image in images %}
{{ image | pprint }}
{% endfor %}
0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

I did the following from your example (basically exactly what you showed me. Remember that custom.products_images is the value I pass in from Hubspot that contains all the urls:

{% set images = custom.products_images|split(',', 4) %}
<ul>
{% for image in images %}
<li>{{ image | pprint }}</li>
{% endfor %}
</ul>

But I got the same thing in the email: 

 

(String: [https://images.test.com/uploads/product/image/thumb_square/thumb_square_1489697398/test.jpg, https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525714380/test.png, https://images.test.com/uploads/product/image/thumb_square/thumb_square_1516831949/test.png])

Maybe it's not possible to do logic on data you pass in?

 

If you do a search on this page: https://developers.hubspot.com/docs/methods/email/transactional_email/single-send-overview

for Note: Custom properties do not currently support arrays, It says, you can't use custom properties and rather pass the whole HTML/mark up. If that's the case, that really stinks. 

 

Anthony

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@tp00012x - Can I please see the output of:

{{custom|pprint}}
0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

When I try editing the 'Source code', and just type:

Screen Shot 2018-08-01 at 10.48.17 AM.png

 

{{custom|pprint}}

I get the following eror:

 

Screen Shot 2018-08-01 at 10.46.13 AM.png

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

Is that the source code of a richtext wysiwyg? You may have to put it in the template file or in the page editor go to settings and advanced and add it to the footer markup there. 

0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

Yes it is the source code for a richtext module. I use a template, and when I modify the template's module source code, and then click on 'Live Preview with display options', I get the following for output for this module:

 

Screen Shot 2018-08-01 at 1.15.49 PM.png

 

Then, I click on Publish, and when i got back to my email, and try to Update the whole email I get the same error:

 

Screen Shot 2018-08-01 at 10.46.13 AM.png

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

I'm not sure if this code helps you but, this is what I was using to help you debug your problem.

{% set custom = {"product_images": '["https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525323775/test.jpg", "https://images.test.com/uploads/product/image/thumb_square/thumb_square_1489697398/test.jpg","https://images.test.com/uploads/product/image/thumb_square/thumb_square_1525714380/test.png","https://images.test.com/uploads/product/image/thumb_square/thumb_square_1516831949/test.png"]'} %}
{% set imgARR = custom.product_images|replace('[', '')|replace(']', '')|split(',', 4) %}
<ul>
    {% for image in imgARR %}
        <li>{{ image | pprint }}</li>
    {% endfor %}
</ul>
0 Upvotes
tp00012x
Member

Hello @tjoyce,

 

Yes, yours work because you are defining product_images inside the 'source code' as the big string with the array inside. products_images is a value I pass from my Rails app which is identical to that big string. 

 

Why doesnt it work? Is it that Hubspot can't deal with and perform operations to passed in data?

 

When I try: 

 

{% set custom = {"product_images": custom.products_images } %} 
{% set imgARR = custom.product_images|replace('[', '')|replace(']', '')|split(',', 4) %}
<ul>{% for image in imgARR %}
<li>{{ image | pprint }}</li>
{% endfor %}</ul>

 

I get in the test email in my inbox:

 

(String: https://images.test.com/...)

I just replaced your string cotaining the array with the custom.products_images which, as I explained before, the string wiht the big array.

 

Anthony

 

0 Upvotes