HTML loads and fire function before apps script return value

Question

I have a server side code.

then client side javascript and a html page made using bootstrap.

The problem I am facing is somehow document is loading before the server side returns value.

here is my server side code

Edit: you must mean client side here

document.addEventListener('DOMContentLoaded', function() {
    
    google.script.run.withSuccessHandler(fetchdata).datafetch();
   
  });

function fetchdata(dataArray)
  
  {
  let tbody = document.getElementById('perf1');
  
  for (var i=0; i<dataArray.length;i++)
  {
    
    var row = document.createElement("tr")
    row.setAttribute("style","height:2px;")
    for (var j=0; j<dataArray[i].length; j++)
     {
           var col = document.createElement("td")
           
           if (j==0)
           {
           col.innerText = dataArray[i][j]
           }
    row.appendChild(col)
     }
     tbody.appendChild(row);
  }
}

here is server side code :

function datafetch()
{
   
  var ss2 = SpreadsheetApp.openById('xxxxxx');
  var sheet = ss2.getSheetByName('Video');
  var email = Session.getActiveUser().getEmail();
  email = email.replace(/@gmail.com/g, "")
  var lrow = sheet.getLastRow();
  var a = sheet.getRange("A1:A"+lrow).getValues();
  a=a.filter(String)
  
  var data = sheet.getRange("A2:R"+a.length).getValues();
  
  var data1 = data.filter(function(item){return item[9] == email}).map(elem => elem[0]);
  data1.flat();
  
  Logger.log(data1)
  
  return data1;
}

I am trying to load a table from the data that I fetched from google sheet but it returns empty array. On server side I am able to see the log and array has values. but on client side it shows null.

Answer 1

Findings

On my testing, your current code structure below should work as it will first load the HTML file before fetching the array data from your spreadsheet:

document.addEventListener("DOMContentLoaded", function(){
 google.script.run.withSuccessHandler(fetchdata).datafetch();
});

function fetchdata(dataArray) {
//code
}

• The null result is most likely due to the getValues() method that you're using on your server side code that contains date/time. You should use getDisplayValues() instead & adjust your server side code accordingly. See this reference answer.

Note: Correct me if I'm mistaken about you do not have any time/date values on your sheet that you're fetching. Then, you can share your sheet file with sample actual data to better replicate your issue.

Testing

1.) Tested this client side code below & used alert(dataArray) method to quickly see if array data gets fetched/shown successfully

document.addEventListener("DOMContentLoaded", function(){

 google.script.run.withSuccessHandler(fetchdata).datafetch();

});

function fetchdata(dataArray) {

alert(dataArray);

}

2.) Used the getDisplayValues() on server side code:

function datafetch(){
  var values = SpreadsheetApp.getActive().getSheetByName('Data').getDataRange().getDisplayValues();
  Logger.log(values);
  return values;
}

3.) Test Sheet "Data" used:

Test Results

When using getDisplayValues() on server side, it returns the actual array values

When using getValues() on server side, it returns null