materializecss adds "," (comma) after 2nd record on google scripts web app

Question

Noob with materializecss here. working on a web-app in gscripts, I get a recordset from a google sheet (payments and invoices) for a student and I populate 2 materialize tables with that info. the code works but for some reason after the first row there's a , being added to each table respectively, and I can't figure out where it comes from

my code.gs with for the invoices (table on the left "Facturas")

//get invoices with id
function getInvoicesForID(studentAltID) {
  var invoicesForID = [];
  //get general invoices sheet and values
  var sInvoices = ss.getSheetByName("Invoices");
  var dataInvoices = sInvoices.getDataRange().getValues();
  //get invoices info for id onto returning array. !!note date needs to be a string!!
  for(var i = 0; i < dataInvoices.length; i++){
    if(dataInvoices[i][4]==studentAltID){
      var invDate = Utilities.formatDate(dataInvoices[i][0],"GMT+1","yyyy-MM-dd");
      invoicesForID.push([invDate.toString(),dataInvoices[i][1],dataInvoices[i][2],dataInvoices[i][3]]);
    }
  }
  Logger.log(invoicesForID);
  return invoicesForID;
}

Logger with the data on the returning invoices array shows this:

[19-07-13 00:46:48:608 EDT] [[2019-01-31, 34073.0, Matricula 2019, 298854.0], [2019-02-01, 34337.0, Pension Feb 2019, 130171.0], [2019-03-01, 34603.0, Pension Mar 2019, 130171.0], [2019-04-01, 34872.0, Pension Abr 2019, 130171.0], [2019-05-01, 35138.0, Pension May 2019, 130171.0], [2018-08-31, 1051.0, Asistencia 2018, 508972.0], [2019-06-01, 35403.0, Pension Jun 2019, 130171.0], [2019-07-01, 35667.0, Pension Jul 2019, 130171.0]]

my javascript that updates the tbody section of the html payment table is this

//get each item invoiced so far for student and create rows with the data to display in html
  function getInvoices(stIDInvData) {
    try{
      //if data was received updated the textboxes of the page with the info retrieved.
      if (stIDInvData != null){
        document.getElementById("tableInvoices").innerHTML += stIDInvData.map(function(row){
        return "<tr><td>" + row[0] + "</td><td>" + row[1] + "</td><td>" + row[2] + "</td><td>" + formatMoney(row[3]) + "</td></tr>";
        });       
      }
    }catch(e){
      alert("getInvoices error" + e);
    }
  }

and my index.html for that table is this:

<div class="input-field col s6">
          <table class="highlight">
            <thead>
              <tr>          
                <th>Fecha</th>
                <th>Referencia</th>
                <th>Memo</th>
                <th>Valor</th>
              </tr>
            </thead>
            <tbody id="tableInvoices">
            <!--content created dinamically -->
            </tbody>
          </table>
        </div>  

any help is appreciated. thank you.

Answer 1

map returns an array of strings. Since you are assigning an array to innerHTML, the array is coerced to a string using toString() and a comma separator is added.

You can join the array returned from map with an empty string like this:

document.getElementById("tableInvoices").innerHTML += stIDInvData.map(function(row) {
  return "<tr><td>" + row[0] + ....;
}).join(' ') // <--

Here's a working snippet to demonstrating the issue:

const array = [1, 2, 3, 4]

document.querySelector('#array').innerHTML += array
document.querySelector('#joined').innerHTML += array.join(' ')

<span id="array"></span><br>
<span id="joined"></span>