title: Success handler in Google Apps script receives null from server function
body: <p>I am trying to display data from a server function in a Google Sheets sidebar. I am using an asynchronous call to the server with a success handler, but the client somehow receives a null value. Despite extensive searching on client-server communication I haven't been able to figure out why.</p>
  
  <p>Currently, the log at the end of the server function shows the object 'flags' fully defined, but the console log at the beginning of the successHandler 'showErrors' says that 'flags' is undefined. </p>
  
  <p>I checked the Google documentation on the HTML service, and as far as I can tell 'flags' is a valid return value since it is an object containing integers, strings, and an array of strings. I tried changing 'flags' from an object so a simple string, and it's still undefined in 'showErrors.' <em>Does anybody know why the content of 'flags' is getting lost between the server and the client?</em> Thanks in advance! </p>
  
  <p>HTML: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form onsubmit="google.script.host.close()"&gt;
  
  &lt;div id="intro" style="font-style:italic"&gt;
  &lt;p&gt;&lt;b&gt;Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;
  Introduction text&lt;/p&gt;
  &lt;HR&gt;
  &lt;input type="button" style="button" id="start" value="Start" onclick="hideDiv('intro');google.script.run.withSuccessHandler(showErrors).checkList2(0,0)"&gt; &lt;!-- Intro starts loop --&gt;
  &lt;/div&gt; 
  
  &lt;div id="showErrors"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  function showErrors(flags){
    console.log('client side flags:');
    console.log(flags);
    var div = document.getElementById('showErrors');
    div.innerHTML = '&lt;p style="font-style:italic"&gt;';
    div.innerHTML += 'Sheet '+flags.pageNum+' of '+flags.numPages+'.';
  
    //... more div.innerHTML += ...
  
    div.innerHTML += '&lt;input type="button" style="button" value="Next" onclick="google.script.run.withSuccessHandler(showErrors).checkList2('+Number(flags.pageNum)+1+','+flags.totalErrors+')"';
    div.innerHTML += '&lt;input type="submit" style="button" value="Cancel"&gt;';
  }
  
  function hideDiv(div){
    document.getElementById(div).innerHTML=''; // clear div
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Server function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function checkList2(nComplete,nErrors){ 
    
    var nSheets=21;  
    nComplete = Number(nComplete);
    nErrors = Number(nErrors);
    
    var results = errorList(nComplete);  // Get results.name (string) and results.errors (array)
    var errors = results.errors;  
    if (errors=='') {
      checkList2(nComplete+1,nErrors); // Move on to next sheet
    } else {
      nErrors = nErrors + errors.length;       
    
      var flags = {};
      flags.numErrors = errors.length;
      flags.totalErrors = nErrors;
      flags.pageNum = nComplete;
      flags.numPages = nSheets;
      flags.sheetName = results.name;
      flags.errors = errors;
      Logger.log('server side flags:')
      Logger.log(flags)
    
      return flags;
    }     
  }</code></pre>
  </div>
  </div>
  </p>