Access server-side data in client-side javascript

Question

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...

If you want code to run after the Web App has loaded, then use window.onload = thisFunctionRunsAfterLoad() {console.log('it did actually run')} I would not use the alert function to determine what is actually happening in your browser code. Use console.log() statements for the browser, and Logger.log() statements for .gs scripts. In Chrome hit the f12 key to open the console in the browser. It looks like you are trying to create a file picker or something like a file picker. — Alan Wells
– Alan Wells, Commented Mar 8, 2017 at 17:56
Yes maybe something like a file picker, but my current issue is I just want the json data I parsed already server-side to be available to my client-side scripts. And here I am stuck even just accessing the innerHTML of any items. — Sindri
– Sindri, Commented Mar 8, 2017 at 18:11
I've provided a working example of creating a Web App with a bulleted list from an array of data. The example excludes getting data from the spreadsheet. The answer is meant to provide a basic starting point. — Alan Wells
– Alan Wells, Commented Mar 8, 2017 at 18:39

Alan Wells · Accepted Answer · 2017-03-08 22:33:42Z

1

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;
}

edited Mar 8, 2017 at 22:33

answered Mar 8, 2017 at 18:15

Alan Wells

31.4k16 gold badges113 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sindri Over a year ago

Say the data is an array such as [{name=foo, id=123, contents={alice=[], bob=[], carl=[]}}], now I'm currently listing each name, what I want is onclick to access the contents and populate another <ul> but can't even access any part of the structure. Edit (misclicked enter): If I could just set the contents of json as a variable accessible to scripts client-side with something like: "var data = <?=getData();?>;"

Alan Wells Over a year ago

Okay. You need to store the JSON data in the browser. There are a couple of ways that you can do that. 1) Put the data into the browser's window object. See updated answer: window.mySpreadsheetData = <? var data = getData(); ?>; You could also put the data into session storage. window.sessionStorage

Sindri Over a year ago

I keep getting the error "expected function but recieved ;" when trying your newest answer

Alan Wells Over a year ago

Sorry, try: <? window.mySpreadsheetData = getData(); ?>; console.log('window.mySpreadsheetData: ' + window.mySpreadsheetData)

Sindri Over a year ago

window not defined, and not sure how I should go about defining that in my code.gs

|

Collectives™ on Stack Overflow

Access server-side data in client-side javascript

1 Answer 1

ui.html

Code.gs

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ui.html

Code.gs

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related