2

I tried sending an html JavaScript’s Template Strings format with nodemailer server, but I have a problem. When the html renders in gmail, a comma is shown between the rows as shown below.

inbos mail in gmail

These is the email template: 

const sendOrder = (name, secondName, products) => `<div style="color: black">

    <table style="margin-left:auto; margin-right:auto; font-size: 20px; border-collapse: 
  collapse;">
      <thead>
        <tr>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Nombre
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Cantidad
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Precio
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            total
          </th>
        </tr>
      </thead>
      <tbody style="font-size: 16px">
        ${products.map(
          product => `
          <tr>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.title}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.cant}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.price}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.cant * product.price}
            </td>
          </tr>
          `
        )}
      </tbody>
    </table>
   </div>
  `;
levininja
  • 3,118
  • 5
  • 26
  • 41
user3821102
  • 139
  • 2
  • 13

1 Answers1

0

This problem is caused by the template literals "`". As explained in this answer, the template literals' toString() method joins the returned array by the map function with a comma ",".

To fix this you can just append .join('') at the end of the map function.

const sendOrder = (name, secondName, products) => `<div style="color: black">

    <table style="margin-left:auto; margin-right:auto; font-size: 20px; border-collapse: 
  collapse;">
      <thead>
        <tr>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Nombre
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Cantidad
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            Precio
          </th>
          <th style="padding-top: 12px;padding-bottom: 12px;text-align: center;background- 
  color: #95C21E;color: white;border: 1px solid #ddd;padding: 8px;">
            total
          </th>
        </tr>
      </thead>
      <tbody style="font-size: 16px">
        ${products.map(
          product => `
          <tr>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.title}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.cant}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.price}
            </td>
            <td style="border: 1px solid #ddd;padding: 8px;">
              ${product.cant * product.price}
            </td>
          </tr>
          `
        ).join("") // Added
       }
      </tbody>
    </table>
   </div>
  `;
hmartos
  • 861
  • 2
  • 10
  • 19