code.gs file variables not returning to Index.html

Viewed 30

I have a simple WebApp to fetch some data from my spreadsheet.

I have declared wanted data as variables in code.gs file

and used them in index.html file

But it's not returning the variable values, it's just giving first element of

only ..

what went wrong (or) how to do this ..?

Can anyone help me in this case ..?

Thanks in Advance.

Spreadsheet URL : enter link description here

WebApp URL : enter link description here

code.gs file

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index.html') 
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

var spreadsheetId   = '16qvXEamrZGNEbCyWMiL2u_OJrHe_XIHLn2eqgQhJYvE';

function gettdslbs() {
  var data1 = Sheets.Spreadsheets.Values.get(spreadsheetId, 'SYLLABUSC!A1').values;
  var data2 = Sheets.Spreadsheets.Values.get(spreadsheetId, 'SYLLABUSC!A2').values;
  var tdslbs = data1 + "</br> <b>" + data2 + "</b>" ;

  return tdslbs ;
}

function gettrslbs() {
  var data3 = Sheets.Spreadsheets.Values.get(spreadsheetId, 'SYLLABUSC!A4').values;
  var data4 = Sheets.Spreadsheets.Values.get(spreadsheetId, 'SYLLABUSC!A5').values;
  var trslbs =   data3 + "</br> <b>" + data4 + "</b>" ;
  
  return trslbs ;
}

Index.html file

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <script>

        document.getElementById('outputa').innerHTML =  tdslbs ;

        document.getElementById('outputb').innerHTML =  trslbs ;

    </script>

  </head>

  <body style="text-align:center">
    <p> Syllabus in Telugu Language will be fetched from Spreadsheet</p>

    <p id="outputa" ></br> <p style="color:#dd0000" id="outputb"></p></p>

    <p id="test"></p>
  </body>
</html>
1 Answers

Here a basic example how to do it, you have to complete with your data

Code.gs :

function doGet() {

  //use template function instead of output
  var template = HtmlService.createTemplateFromFile('Index.html');

  //add variable
  template.data = "test";

  return template.evaluate();
}

Index.html :

<!DOCTYPE html>
<html>

  <body>

    <!-- display "test" here-->
    <p> <?= data ?> </p>

  </body>
</html>
Related