Array of strings adding commas when inserted into HTML

Question

I have a bunch of names I'm adding to an array:

for (const approve of requestApproval[strings.Approve]) {
    approved.push(
        approve.Title + '<br/>'
    );
}

The array:

I then put it into an email as HTML:

<center>
    <table border="0" cellpadding="5" cellspacing="5" style = "border-collapse: collapse;">
        <tr>
            <th>Approved</th>
            <th>Abstained</th>
            <th>Not Approved</th>
        </tr>
        <tr>
            <td align="center">${approved}</td>
            <td align="center">${abstained}</td>
            <td align="center">${disapproved}</td>
        </tr>
    </table>
</center>

The result is a comma is inserted from somewhere:

How can I either stop the comma or remove the comma?

approved.join("") - the comma is there because its the default behavior of Array.toString()) — Alex K.
– Alex K., Commented Apr 4, 2019 at 14:11

trincot · Accepted Answer · 2019-04-04 14:12:02Z

1

When you do this in your template literal:

<td align="center">${approved}</td>

... you silently convert the array approved to a string, whereby the array elements are delimited with a comma.

To avoid that, either:

don't build an array, but a string:

let approved = ""; // string!
for (const approve of requestApproval[strings.Approve]) {
    approved += approve.Title + '<br/>';
}

Or

convert the array in a controlled way, using the empty string as delimiter:
```
<td align="center">${approved.join("")}</td>
```

answered Apr 4, 2019 at 14:12

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jo_va · Accepted Answer · 2019-04-04 15:41:36Z

1

You need to convert your array to a string by joining it with empty strings (.join('')), otherwise, JavaScript will automatically join it with commas when converting it to a string.

You can also replace your for loop with Array.prototype.map():

const approved = requestApproval[strings.Approve].map(x => x.Title + '<br/>').join('');

or (but removes the last <br>):

const approved = requestApproval[strings.Approve].map(x => x.Title).join('<br/>');

Then insert the string in your html template string:

<td align="center">${approved}</td>

edited Apr 4, 2019 at 15:41

answered Apr 4, 2019 at 14:15

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

Array of strings adding commas when inserted into HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related