CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
Sindri
Sindri

Reputation: 49

Access server-side data in client-side javascript

Attempting to create a webapp in google-script that will allow users to pick a sheet, name and create a calendar.

I thought I could just push all important information parsed as json to client-side, and then just use scripts there to access the different parts of template.data to then later call the google-script code to create the calendar. But I can't even throw alerts with the name of whatever I'm clicking.

So what I expected to happen with code below was clicking any list item would just return the text inside <li> but every list item gives the alert "undefined"

My doGet() in code.gs

function doGet() {
  // Parse all sheets available and set as element to template
  var template = HtmlService.createTemplateFromFile("ui");
  var spreadsheet = SpreadsheetApp.openByUrl(url);

  var sheets = spreadsheet.getSheets();
  var json = [];
  sheets.forEach(function(sheet){
    json.push(getScheduleAsJSON(sheet));
  });
  template.data = json;  
  return template.evaluate();
}

My ui.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function getName(){
        alert(this.InnerHTML);
      }
    </script>
  </head>
  <body>
    <ul id="SheetList">
      <? for (var i = 0; i < data.length; i++){?>
        <li onclick="getName();">
          <?=data[i].name;?>
        </li>
      <?}?>
    </ul>
    <ul id="NameList">
      <li onclick="getName();">foo</li>
    </ul>
  </body>
</html>

Edit 1:

So looks like I goofed when even trying the HTML part, changing these bits. 

<li onclick="getSheetName(this);">
  <?=data[i].name;?>
</li>

function getSheetName(item){
  console.log(item.innerHTML);
}

Would still want to be able to somehow access the array of jsons computed server-side without having to call google.script.run each function.

Edit 2:

Think I've identified what I'm looking for; PropertiesService. I have still no clue as how to implement and actually access the data I assume I've stored in it. Everything I've tried so far has always yielded the same "undefined" results. Currently storing the whole json as a string in my script properties, can't access anything on the console.log however so not sure at all whether this actually is a step forward or not.

So currently added to my doGet():

var properties = PropertiesService.getScriptProperties();
properties.setProperty("schedule-data", JSON.stringify(data));

And this function being called with google.script.run.onsuccesshandler.myfunc():

function getProperties(){
  var properties = PropertiesService.getScriptProperties();
  return properties.getProperty("schedule-data")[0].name;
}

Logger.log(json[0].name) returns "March 2017" so still at a total loss as to why I'm not getting anything on the html side of things...

Upvotes: 2

Views: 2417

Answers (1)

Alan Wells
Alan Wells

Reputation: 31300

You are missing the data which needs to be loaded into the HTML with a "scriptlet":

<? var data = getData(); ?>

You can see an example in the documentation at the following link:

Calling Apps Script functions from a template

ui.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      window.onload = function myOnloadFunc() {
        console.log('The Web App has loaded')
        google.script.run
         .withSuccessHandler(funcToRunOnSuccess)
         .getData();
      }

      window.funcToRunOnSuccess = function(returnedData) {

        window.mySpreadsheetData = returnedData;
        console.log('window.mySpreadsheetData: ' + window.mySpreadsheetData)
      }

    </script>
  </head>
  <body>
    <div>Anything</div>

    <? var data = getData(); ?>

    <ul id="SheetList">
      <? for (var i = 0; i < data.length; i++){?>
        <li onclick="getName();">
          <?= data[i]; ?>
        </li>
      <?}?>
    </ul>

    <ul id="NameList">
      <li onclick="getName();">foo</li>
    </ul>
  </body>
</html>

Code.gs

function getData() {
  var arrayOfJSON,allSheets,data,html,ss,template;
  //ss = SpreadsheetApp.openByUrl(url);

  //allSheets = ss.getSheets();
  //arrayOfJSON = [];

  /*allSheets.forEach(function(sheet){
    Logger.log('sheet: ' + sheet)
    json.push(sheet);
  });
  */
  arrayOfJSON = ['one','two','three'];
  return arrayOfJSON;
}

function doGet() {
  var html,template;

  template = HtmlService.createTemplateFromFile("ui");  
  html = template.evaluate();

  return html;
}

Upvotes: 1

Related Questions