Trying to add data from a sheet in a table in html using app script

Question

I have data in a sheet in this format which has to be presented in a tabular form inside an HTML Page

Sheet Data

I am using Google App Script for achieving the same. The below code is for trying out this option and if this works, I will fit the code into my original HTML Page.

All other things are working fine except the excel data is not coming into the HTML page. I am able to form the table equal to the length of the data but the information inside it is not coming. I have checked the javascript code independently and the data is being fetched to the code, but it is not appearing in the HTML Code.

I have written the following HTML code

   <!DOCTYPE HTML>
   <HTML>
   <head>
   <style>
   table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
   }
   </style>
   </head>
   <body>


   <table style="width:100%">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    </tr>
    <? for (var i=0; i<defintion_s_no.length;i++) {?>
        <tr>
          <th><?defintion_s_no[i]; ?></th>
          <th> 1 </th>
          </tr>
      <? }?>
    </table>

   </body>
   </html>

and the following javascript code for the same

var url = 'https://docs.google.com/spreadsheets/d/1CGZVG6NGAy325wgCz-dS6ZjJ_it5ShzLshIdD-CCpqs/edit';

function doGet(e){
return definition();
}

function defintion() {
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("Datafeed");
  var defintion_s_no = data_till_lastrow_coulmn("Description");
  var tmp = HtmlService.createTemplateFromFile('try');
  tmp.defintion_s_no = defintion_s_no.map(function(r){ return r[0]; });
  
  return tmp.evaluate().setTitle('Daily Task Updater');
}


function data_till_lastrow_coulmn(key) {
  //get the data till the last row of a specified column using the key to find the header of the column
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("Datafeed");
  var last_row = webAppSheet.getLastRow();
  var header_values = webAppSheet.getRange(1,1,1,15).getValues()[0];
  var dropdown_column = 0;
  //find the column of the "key" in the header row
  for (var i=0; i<15; i++){
    if(header_values[i]==key){
      dropdown_column = i+1;
    }
  }
  //finding the last row in the column containing key as the header
  var workstream_Values = webAppSheet.getRange(2,dropdown_column,last_row,1).getValues();
  var dropdown_lastrow = 0;
  var blank = false;

  for (var i=0;i<last_row;i++){
    if(workstream_Values[i+1]==""&& !blank){
      dropdown_lastrow = i+1;
      blank = true;
      break;
    }
    else if(workstream_Values[i] != ""){
        blank = false;
    }
  }
  return webAppSheet.getRange(2,dropdown_column,dropdown_lastrow,1).getValues();
}

I am unable to see the data here

Final Output

You might want to read about scriptlets in the guide to section of the documentation just go to the documentation and search on scriplets. This is also called templated HTML and the data will be supplied for her side before the HTML is rendered. — Cooper, Feb 07 '21 at 16:39
I meant to say that the data will be supplied server side before the html is rendered. — Cooper, Feb 07 '21 at 17:10

Trying to add data from a sheet in a table in html using app script

0 Answers0