Sendrid with Typescript handlebars iterations doesn't work

Question

I have this data, that comes form a form:

{
"sender": "tom_jones@test_email.com",
"portfolios": [
    {
        "id": "454453bb-8bc8-4eb1-9796-2e82046b3a12",
        "label": "Portafoglio_1"
    },
    {
        "id": "882aa086-5c3b-45e0-a76c-7f5efae6ae12",
        "label": "Portafoglio_2"
    }
  ]
}

and I am using Sendgrid inside Typescript file, for sending email: using this import inside my Typescript file:

import sgMail from '@sendgrid/mail'

When it comes to use the html, It works for the sender, that is a simple string:

 <strong>${request.body?.sender}</strong>

but when I have to iterate to the portfolios, this code doesn't work:

   {{#each request.body?.portfolios}}
      <tr>
        <td style="padding: 0 15px 0 0;">{{this.label}} ({{this.id}})</td>
      </tr>                                  
   {{/each}} 

I've also tried a double for-each, like suggested in this link: How to iterate objects in Handlebars?

but it didn't work. I tried many combinations for {{#each }} but none of them is working.

I saw many posts on Sendgrid for-each iterations, and none works. Am I missing something ?

Answer 1

Found out that the solution was to build the output with a piece of code nested in the html:

  ${request.body?.portfolios?.map((portfolio) =>
      `<tr>
         <td>${portfolio.label} (${portfolio.id}) </td>
       </tr>`
   )}

This is the only way that works.

The {{#each }} doesn't work.