Mandrill API - Handlebar each loop in Table

6
votes

I use the Mandrill API to send my transactional Mails via PHP.

Now I'm running in the problem, that when I try to loop through multiple vars only the last one is shown.

this is my variable for global_merge_vars

array(
        array(
            'name' => 'products',
            'content' => array(
                array(
                    "name" => "Product 1",
                    "price" => "65€"
                ),
                array(
                    "name" => "Product 2",
                    "price" => "65€"
                ),
                array(
                    "name" => "Product 3",
                    "price" => "65€"
                )
            )               
        )
    );

My issue is glued to the products part with the array as content.

So if i try the following: 

{{#each products}}
  {{name}} - {{price}}<br>
{{/each}}

I get 

Product 1 - 65€
Product 2 - 65€
Product 3 - 65€

So far so good...

but if I try to wrap the whole thing in a table, I always just get the last array element shown... 

<table>
  {{#each products}}
    <tr>
      <td>{{name}} - {{price}}</td>
    </tr>
    {{/each}}
</table>

results in: 

Product 3 - 65€

Actually, I think, it's just a stupid mistake on my side, but right now, I have no idea what is the problem!

So thank you all in advance for your help :)

___________________UPDATE________________________

i also found out, that it works if i put the whole table in the loop, like the following: 

{{#each products}}
  <table>
    <tr>
      <td>{{name}} - {{price}}</td>
    </tr>
  </table>
{{/each}}

but thats not really what i want as stated before :)

2
phphtmlhandlebars.jsmailchimpmandrill
Could you try {{this.name}} instead of {{name}} inside the loop. Can't really figure out why your code didn't work. - Vishnudev
thanks for your reply! unfortunately i had the same idea but it didn't make any difference :/ - FalcoB
what if you add tbody ? <table><tbody> {{#each products}} <tr> <td>{{name}} - {{price}}</td> </tr> {{/each}}</tbody> </table> - cske
nope, unfortunately exactly the same as before :( - FalcoB
@kjpc-tech check my answer if you still have a problem - Layon Ferreira

2 Answers

2
votes

This is probably too late for OP but after spending a few hours trying to understand this, I came across the solution on a GitHub thread. Basically you put your handlebar tags on a HTML comment like this:

<table>
  <!-- {{#each products}} -->
  <tr>
    <td>{{name}} - {{price}}</td>
  </tr>
  <!-- {{/each}} -->
</table>

credits: gurpreetatwal

0
votes

Have never used Handlebars before so forgive me if I'm completely missing something, but I was intrigued and tried to reproduce.

Handlebars version is: 4.0.12.

HTML: 

<script id="header" type="text/x-handlebars-template">

    <table>
        {{#each content}}
             <tr>
                <td>{{name}} - {{price}}</td>
            </tr>
        {{/each}}
    </table>
</script>

Js (I just run json_encode() on your array) : 

<script>
var products = [
    {
        "name": "products",
        "content": [
            {"name": "Product 1", "price": "65"},
            {"name": "Product 2", "price": "65"},
            {"name": "Product 3", "price": "65"}
        ]
    }
];
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);

$(document.body).append(theTemplate(products));

</script>

And got the expected output of: 

Product 1 - 65
Product 2 - 65
Product 3 - 65