Google html service to sheets - google-apps-script

Question

I'm not a big fan of google forms so I made the form for my user input in the html service. I found a way to push the data out of the form and into google sheets using all of my variables in the html file like this:
<textarea type="text" name="Special Instructions" id="instructions"></textarea>
...
var instructions = document.getElementById("instructions").value;
...
google.script.run
.formsubmit (instructions,...)
google.script.host.close()}
in combination with the following in the code file:
function formsubmit(instructions,...)
var ss = SpreadsheetApp.getActive().getSheetByName("Sheet1");
ss.getRange(ss.getLastRow(),7,1,1).setValue(instructions);
...
The problem is, not only is the code very slow to output results, but if I have more than 37 or so variables defined, it glitches out and rather than closing the dialog box and recording the values in a spreadsheet, it opens a blank web page.
I know there has to be better (and more efficient) way, but I'm afraid I don't know it.

Answer 1

On the "client side", put all of your variables into a JSON object or an array, the stringify it, and send that string to the server.
var objectOfData;
variableOne = "one";
variable2 = "two";
objectOfData = {};
objectOfData['varOne'] = variableOne;//Create a new element in the object
objectOfData['var2'] = variable2;//key name is in the brackets
objectOfData = JSON.stringify(objectOfData);//Convert object to string
google.script.run
.formsubmit(objectOfData);
And then convert the object as a string back to a real object:
function formsubmit(o) {
var arrayOfValues,k,myData,outerArray;
myData = JSON.parse(o);//Convert string back to object
var ss = SpreadsheetApp.getActive().getSheetByName("Sheet1");
arrayOfValues = [];
for (k in myData) {//Loop through every property in the object
thisValue = myData[k];//
Logger.log('thisValue: ' + thisValue);//VIEW the LOGS to see print out
arrayOfValues.push(thisValue);
}
outerArray = [];
outerArray.push(arrayOfValues);
ss.getRange(ss.getLastRow() + 1,7,1,arrayOfValues.length).setValue(outerArray);
...
Note that the last parameter of getRange('start row', start column, number of rows, number of columns) uses the length of the inner array named arrayOfValues. This insures that the parameter value will always be correct regardless of how the array is constructed.