Nested {{each}} loops in SendGrid Template

Question

Im trying to iterate an Array of Objects for putting their values in a Handlebars template using the each loop inside the structure of the array. Here you can see the array:

{
  "payload": {
      "order":{
          
    "id":"2255",
    "subtotal_gross_amount":"$100",
    "shipping_price_net_amount":"$20",
    "tax_amount":"$40",
    "subtotal_net_amount":"$160",
          
          "lines":[
              "product":{
                   "product_name" : "Air Football Pro",
                   
                   "varient":[
    {
    "varient_name":"X",
    "quantity":"2",
    "total_gross_amount": "$345",
    "total_tax_amount": "$345",
    "total_net_amount": "$345"
  },
      {
      "varient_name":"Y",
    "quantity":"1",
    "total_gross_amount": "$345",
    "total_tax_amount": "$345",
    "total_net_amount": "$345"
  }
              ]
              }
  ]
  }
}
}

And the each loop if've tried as you can see:

{{#each payload.order.lines}}
               <table class="module" role="module" data-type="code" border="0" cellpadding="20" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="a16c3fb2-992a-4f39-8c80-c285b41a1eb1">
                  <tbody>
                      <tr>
                       <td>
                        <div style="font-family: inherit; font-size:25px; text-align: inherit;"><strong>{{this.product.product_name}}</strong> </div>
                        <div style="font-family: inherit; font-size:15px; text-align: inherit"> </div>
                        {{#each variant}}
                        <!--{{#if this.product.variant}}-->
                        <div style="font-family: inherit; font-size:25px; text-align: inherit;"><strong>{{varient.varient_name}}</strong></div> 
                        <div style="font-family: inherit; font-size:25px; text-align: inherit;"> </div> 
                        <div style="font-family: inherit; font-size:15px; text-align: inherit; padding: 2px;">Quantity: {{variant.quantity}} </div>
                        <div style="font-family: inherit; font-size:15px; text-align: inherit; padding: 2px;">Total_Gross_Amount: {{variant.total_gross_amount}} </div>
                        <div style="font-family: inherit; font-size:15px; text-align: inherit; padding: 2px;">Total_Tax_Amount: {{variant.total_tax_amount}} </div>
                        <div style="font-family: inherit; font-size:15px; text-align: inherit; padding: 2px;">Total_Net_Amount: {{variant.total_net_amount}} </div>
                        <!--{{/if}}-->
                        {{/each}}
                       </td>
                     </tr>
                  </tbody>
               </table>
 {{/each}}
 

I don't know how to solve it or what I'm doing wrong. I appreciate any comment about this issue Thanks a lot

Answer 1

Just like you referenced this.product.product_name, you would need to reference

{{#each this.product.variant}}

This will begin an inner loop of iteration. In here you would reference attributes like {{this.varient_name}}.

Answer 2

The answer by Steven White did not work for me.

The way it works is that the this variable is replaced by the nested object reference.

So just refer to it in nested loop as if it is in single loop.

{{#each payload.order.lines}}
           <table class="module" role="module" data-type="code" border="0" cellpadding="20" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="a16c3fb2-992a-4f39-8c80-c285b41a1eb1">
              <tbody>
                  <tr>
                   <td>
                    ...
                    {{#each this.product.variant}}
                    <div style="font-family: inherit; font-size:25px; text-align: inherit;"><strong>{{this.name}}</strong></div> 
                    ...
                    {{/each}}
                   </td>
                 </tr>
              </tbody>
           </table>
{{/each}}