Alerts Composer: Message Text - How to loop the comma-separated data to one below the other

Content

Hello,

Under Message Text - We are looking for a way to get the comma-separated values of an array into one below the other. 

Currently, we have a code to bring the learners upcoming details: 

In the table data currently, the LearnerName, Learning Item Type, Learning Item Title - data is displayed Within square bracket []; comma-separated values. - We are looking for a way to get them one below the other. 

Mostly looking for a way to loop.

Thank You, 
Archana Chandru 

Code Snippet

<div style="">Dear ${learnerLearningRecords[0].assignedToPersonDetails[0].lineManagerDisplayName}<br>
<font size="2" face="Helvetica Neue, Helvetica, Arial, sans-serif"> </font>
</div>
<div style="">
<font size="2" face="Helvetica Neue, Helvetica, Arial, sans-serif">
<br>
</font>
</div>
<div style="">
<font size="2" face="Helvetica Neue, Helvetica, Arial, sans-serif">You team has been assigned to complete the following learning activities:&nbsp;</font>
</div>
<div style="">
<font size="2" face="Helvetica Neue, Helvetica, Arial, sans-serif">
<br>
</font>
</div>
<div style="">
<br>
${AlertUtils.loop('learnerLearningRecords','')}
<br>
<table border="1">
<tbody>
<tr>
<th> Learner Name </th>
<th> Learning Item Type </th>
<th> Learning Item Title </th>
</tr>
<tr>
<td>${assignedToDisplayName}</td>
<td>${assignmentType}</td>
<td>${learningItemTitle}</td>
</tr>
</tbody>
</table>
<br>
</div>
<div style="">
<font size="2" face="Helvetica Neue, Helvetica, Arial, sans-serif">Please do not reply to this mail. Instead contact your Manager or HR partner.</font>
</div>