I want to return the object from code.gs to html file on google app script. But I couldnt return the values. I want to display the values on the html interface. I couldnt return value at "alert(retsearch[0].yourname);" Please help, Thank you!!

Code.gs

function getData() {
  var ss=SpreadsheetApp.openById('1PWJyASHmjJ_W8-72u8bbrGbN-Nv6kdkCvjdmYuNNlEY');
  var sheet=ss.getSheetByName('invoice1');
  return sheet;
}

function processSearch(searchform){
 var sheet = getData();
 var data = ObjApp.rangeToObjects(sheet.getDataRange().getValues());
 var searchfname=searchform.surname;
 var searchcname=searchform.scustomername;
 var searchpayementdate=searchform.spayementdate;
 var results = [];
 for(var i=0 ; i < data.length ; i++) {
    if(searchfname == data[i].yourname || searchcname == data[i].customername || searchpayementdate == data[i].paymentday   ) {
      var events ={yourname:data[i].yourname, customername:data[i].customername,paymentday:data[i].paymentday };
      results.push(events);   
    }
  }
   Logger.log(results); 
   return results;
}

Html file

<form id="fsrecord">
<input type="text" name="surname" id="surname" placeholder="by your name"/> <br/>
<input type="text" name="scustomername" id="scustomername"  placeholder="by customer name"/> <br/>
<input type="date" name="spayementdate" id="spayementdate"  placeholder="by payment date"> <br>
<input type="submit" value="search" />
</form>

<script>
$( document ).ready(function() { 
 $("#fsrecord").submit(function() {
  google.script.run.withSuccessHandler(function(retsearch){ 
   alert(retsearch[0].yourname);
  }).processSearch(this);

 });

});

</script>

I want to return the object from code.gs to html file on google app script. But I couldnt return the values. I want to display the values on the html interface. I couldnt return value at "alert(retsearch[0].yourname);" Please help, Thank you!!

Code.gs

function getData() {
  var ss=SpreadsheetApp.openById('1PWJyASHmjJ_W8-72u8bbrGbN-Nv6kdkCvjdmYuNNlEY');
  var sheet=ss.getSheetByName('invoice1');
  return sheet;
}

function processSearch(searchform){
 var sheet = getData();
 var data = ObjApp.rangeToObjects(sheet.getDataRange().getValues());
 var searchfname=searchform.surname;
 var searchcname=searchform.scustomername;
 var searchpayementdate=searchform.spayementdate;
 var results = [];
 for(var i=0 ; i < data.length ; i++) {
    if(searchfname == data[i].yourname || searchcname == data[i].customername || searchpayementdate == data[i].paymentday   ) {
      var events ={yourname:data[i].yourname, customername:data[i].customername,paymentday:data[i].paymentday };
      results.push(events);   
    }
  }
   Logger.log(results); 
   return results;
}

Html file

<form id="fsrecord">
<input type="text" name="surname" id="surname" placeholder="by your name"/> <br/>
<input type="text" name="scustomername" id="scustomername"  placeholder="by customer name"/> <br/>
<input type="date" name="spayementdate" id="spayementdate"  placeholder="by payment date"> <br>
<input type="submit" value="search" />
</form>

<script>
$( document ).ready(function() { 
 $("#fsrecord").submit(function() {
  google.script.run.withSuccessHandler(function(retsearch){ 
   alert(retsearch[0].yourname);
  }).processSearch(this);

 });

});

</script>

• javascript
• google-apps-script
• google-sheets

1 Answer 1

You can convert the stringify the data at the server side and parse the JSON at the client side.

code.js

function processSearch(searchform){
   ...
   ...
   return JSON.stringify(results);
}

index.html

$(document).ready(function () {
    $("#fsrecord").submit(function () {
        google.script.run.withSuccessHandler(function (retsearch) {
            var response = JSON.parse(retsearch);
            alert(response[0].yourname);
        }).processSearch(this);
    });
});