Nested variables not rendering in email template using mustache - html

Question

So I am having trouble getting the variable values to be shown in an email template. The 3rd party email templating provider is Postmark and it uses Mustache. My template is set up like this (I have ommitted some of the irrelevant html to keep things shorter):
{{#discount_group.delivery_fee}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{delivery_fee}}</p>
</td>
</tr>
{{/discount_group.delivery_fee}}
{{#discount_group.discount}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{discount}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total_bold">{{grandtotal}}</p>
</td>
</tr>
{{/discount_group.discount}}
And my json payload looks like this:
"discount_group": {
"delivery_fee":"delivery_fee_Value",
"discount": "discount_Value",
"grandtotal": "grandtotal_Value"
}
But when I send out the email, the sections render properly but the variable values are blank (red box):
If I remove "delivery_fee" from the json payload, the section is not rendered as expected but the values are sill missing:
I have also tried {{discount_group.delivery_fee}} and {discount_group.discount}} etc but that still had the missing values.
What am I doing wrong?
Thanks in advance

Answer 1

So I figured it out. I'm not sure why it has to be this way but it does. My problem was in the payload. The payload should be formatted like this:
"discount_group": {
"delivery_fee":{
"delivery_fee":"delivery_fee_Value"
},
"discount": {
"discount":"discount_Value",
"grandtotal": "grandtotal_Value"
}
}

Answer 2

When you wrap a block of code in mustache, what you're doing is stepping into that object in your data in an effort to make your code more readable. Postmarks documentation calls it 'Scoping'. You can read up on here!
Therefore, by starting blocks with, for example, {{#discount_group.delivery_fee}}, you are already at delivery_fee and calling it again will return nothing since it doesn't exist.
With how your data was originally structured, you had everything you needed nested in discount_group, so you didn't need to nest further in your brackets. I know you have found a resolve, but in the future, instead of changing your data to match your code, you could consider instead update your code to be as follows:
{{#discount_group}}
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{delivery_fee}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total">{{discount}}</p>
</td>
</tr>
<tr>
<td width="30%" class="purchase_footer" valign="middle">
<p class="purchase_total_bold">{{grandtotal}}</p>
</td>
</tr>
{{/discount_group}}