Saving checkboxes asynchronously in Google Apps Script

Question

I'm new to asynchronous calls and I think this is the problem. However, i'm not too sure how to fix it since Google Apps Script does not support promises and I also don't know how to use them. I've heard that if HTML Service is used in GAS, then promises are possible and this is what I'm using. However, I'm at a loss on how to implement this. Here is what I have so far. The main PROBLEM IS THAT I need the data to show in the second Logger.log on the server-side (code.gs) below. The data gets to the function in the first logger.log (code.gs), but then the object is empty (not null), when displaying the user cache in the second logger.log (code.gs). Any keys/data can be used and problem can be replicated, so it has something to do with asynchronous calls, but how do I fix it in the GUI_JS code?

Server-side (code.gs):

// global variable to save into the cache
var userCache = CacheService.getUserCache();

// SAVE OPERATION - saves the checkboxes into the user cache
function processSavedValues(checkboxesObj){
  Logger.log(checkboxesObj); // this line shows in Logger
  userCache.putAll(checkboxesObj, 20);
  var getCache = userCache.getAll(['key1','key2']);
  Logger.log(getCache); // this line doesn't show in Logger
}

// Loads the HTML Service of Apps Script
function doGet(request) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Client-side (index.html):

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

  <form>
    <fieldset class="columnList">
      <div>
        <input type="checkbox" id="key1" name="fieldset[]" value="value1">
        <label class="checkmark" for="key1">test1</label>
      </div>
      <div>
        <input type="checkbox" id="key2" name="fieldset[]" value="value2">
        <label class="checkmark" for="key2">test2</label>
      </div> 
    </fieldset>
  </form>

  <button onclick="saveAllCheckboxValues()">test</button>

  <?!= include('GUI_JS'); ?> 
  </body>
</html>

Client-side using HTML Service (GUI_JS.html):

<script>

// Saves all checkbox values into the cache
function saveAllCheckboxValues(){

  // Select all checkboxes in the document
  var allCheckboxes = document.querySelectorAll("input[type=checkbox]");

  // Create a Key/Value pairs with the IDs and values of each checkbox
  var checkboxesObj = {};
  for (var i = 0; i < allCheckboxes.length; i++) {
     checkboxesObj[allCheckboxes[i].id] = allCheckboxes[i].checked;
  }

  // sends the checkbox values server-side into the cache
  google.script.run.withSuccessHandler(checkboxSaved).processSavedValues(checkboxesObj);

  // displays successfully saved
  function checkboxSaved(){
    alert("Great Success!");
  }

}

</script>

The result of Logger.log:

[19-03-14 18:28:38:913 PDT] {key1=true, key2=true}
[19-03-14 18:28:38:959 PDT] {}

Can you paste the result of Logger.log(checkboxesObj); // this line shows in Logger — Goodbye StackExchange
Were these the same values you were using in your other question? As I mentioned in my comments & answer there, and as Tanaike mentions here, the values to be placed in cache must be strings. — tehhowch

Tanaike Tanaike · Accepted Answer · 2019-03-15T01:48:36

I think that the reason of your issue is the boolean values in the object for putting to CacheService. At CacheService, the string value is used for putting. So how about this modification? Please think of this as just one of several answers. In my modification, the function of processSavedValues() was modified.

Modified script:

function processSavedValues(checkboxesObj){
  Logger.log(checkboxesObj);
  userCache.put("sampleKey", JSON.stringify(checkboxesObj), 20); // Modified
  var getCache = userCache.get("sampleKey"); // Modified
  getCache = JSON.parse(getCache); // Added
  Logger.log(getCache);
}

References:

If this didn't work and this was not the result you want, I apologize.

Saving checkboxes asynchronously in Google Apps Script

1 Answers

Modified script:

References: