Can't pass values to HtmlService - google-apps-script

Here is the function I am using to get all the active values on my spreadsheet:
function getAllValuesInSheet(){
var values = SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
Logger.log(values);
return values;
}
This returns an 2D Array of my values.
In my HtmlService I have:
<script>
function onSuccess(values) {
console.log("ran");
console.log(values);
}
function populate(){
google.script.run.withSuccessHandler(onSuccess).getAllValuesInSheet();
}
</script>
<script>
// Using the "load" event to execute the function "populate"
window.addEventListener('load', populate);
</script>
I get an error Uncaught ScriptError: The script completed but the returned value is not a supported return type.
I have functions similar to this one that work perfectly fine. I wonder if the data is too large to pass? It's not that big it's under 500 cells.
Why am I getting this error? How can I fix this? I am trying to load all my spreadsheet data to my HtmlService. Is this a bad practice for small data sets? Should I make ajax calls back and forth instead?

Try converting the array to a json format with the function JSON.stringify(object) so the array is easier to treat.
your code would be like:
return JSON.stringify(values);
Check if this doesn't work for you.

The reason that Gerardo's answer works is because it ensures that your server-side function returns a String, which is a JavaScript primitive.
Your original request would fail if any of the array contents consisted of unsupported types such as Date objects.
Source: HTML Service: Communicate with Server Functions

Related

Html Data Attribute Not Properly Translating To "success" Portion of "jquery.get()" in HtmlHelper

I'm trying to create an HtmlHelper for jstree nodes. Part of my objective is to encapsulate the "select_node" logic into a re-usable format. For our purposes, we can expect to use a jquery "GET" which will call into an MVC controller method. That URL needs to be dynamic and is passed in via an html custom data attribute. The resultant behavior upon success also needs to be dynamic and is also passed in via the same means. My problem is that, despite the passed in URL being interpreted and called properly (the controller method is hit), I cannot get the "success" portion to work properly. Below are code examples with corresponding comments. The non-working scenario (the last commented attempt with "data.node.li_attr.success") would be the ideal as we would need to pass in multiple lines.
writer.WriteLine("</ul>");
writer.WriteLine("</div>");
writer.WriteLine($"<script>");
writer.WriteLine($"$({treeParamModel.TreeName}).jstree({{"); // base tree definition
// "core" config standard to every jstree
writer.WriteLine("'core':{");
writer.WriteLine($"'multiple':{treeParamModel.IsMultiSelectAllowed.ToString().ToLower()}");
writer.WriteLine("},");
// "types" plugin
writer.WriteLine("'types':{");
writer.WriteLine("'default':{");
writer.WriteLine($"'icon':'{treeParamModel.IconPath}'");
writer.WriteLine("}");
writer.WriteLine("},");
writer.WriteLine("'plugins' : ['types']"); // define which plugins to bring in
writer.WriteLine("})");
writer.WriteLine($".on('select_node.jstree', function (e, data) {{");
writer.WriteLine("$.get({url: data.node.li_attr.get_url,");
writer.WriteLine("success: function (result) { alert(data.node.li_attr.success)}"); // works (correctly displays variable content.)
//writer.WriteLine("success: function (result) { $(data.node.li_attr.success)}"); // WHY? "Uncaught Error: Syntax error, unrecognized expression: alert('hello')"
writer.WriteLine("});");
writer.WriteLine("});");
writer.WriteLine("</script>");
The MVC view passes in the following:
#{
var treeName = "tree";
var success = "alert('hello');";
}
Update
My colleague and I have found that we can ALMOST achieve our desired result by using the "eval()" function.
writer.WriteLine("success: function (result) { eval(data.node.li_attr.success)}");
works as expected with the exception that it stops evaluating content after the first space.

How do I use the data returned by an ajax call?

I am trying to return an array of data inside a JSON object that is return from a URL, I can see the data that is being returned using console.log.
However when trying to catch the return array in a variable for example:
var arr = list();
console.log(arr.length);
The length being output by this code is "0" despite the fact that the data returned has content (so the length is greater than zero). How can I use the data?
list: function() {
var grades = [];
$.getJSON(
"https://api.mongolab.com/api/1/databases", function(data) {
console.log(data);
grades [0] = data[0].name;
console.log(grades.length);
});
return grades;
},
The issue you are facing is easy to get snagged on if you aren't used to the concept of asynchronous calls! Never fear, you'll get there.
What's happening is that when you call the AJAX, your code continues to process even though the request has not completed. This is because AJAX requests could take a long time (usually a few seconds) and if the browser had to sit and wait, the user would be staring in angsuish at a frozen screen.
So how do you use the result of your AJAX call?
Take a closer look at the getJSON documentation and you will see a few hints. Asynchronous functions like getJSON can be handled in two ways: Promises or Callbacks. They serve a very similar purpose because they are just two different ways to let you specify what to do once your AJAX is finished.
Callbacks let you pass in a function to getJSON. Your function will get called once the AJAX is finished. You're actually already using a callback in the example code you wrote, it's just that your callback is being defined inside of your list() method so it isn't very useful.
Promises let you pass in a function to the Promise returned by getJSON, which will get called once the AJAX is finished.
Since you are doing all this inside of a method, you have to decide which one you're going to support. You can either have your method take in callbacks (and pass them along) or you can have your method return the promise returned by getJSON. I suggest you do both!
Check it out:
var list = function(success) {
// Pass in the callback that was passed into this function. getJSON will call it when the data arrives.
var promise = $.getJSON("https://api.mongolab.com/api/1/databases", success)
// by returning the promise that getJSON provides, we allow the caller to specify the promise handlers
return promise;
}
// Using callbacks
list(function(grades) {
console.log(grades);
});
// Using promises
list()
.success(function(grades) {
console.log(grades);
});

Having trouble retrieving JSON from res

I'm using node, express, and mongoose.
I have a function that performs a search in a database and sends the response in a JSON format with:
res.jsonp(search_result);
This displays the correctly returned result in the browser as a JSON object. My question is, how do I get that JSON object?
I've tried returning search_result but that gives me null (possibly because asynchronous). I'd also like to not edit the current function (it was written by someone else). I'm calling the function and getting a screen full of JSON, which is what res.jsonp is supposed to do.
Thanks in advance.
Just make a new function that takes this JSON as parameter and place it inside the old one. Example:
// Old function
app.get('/', function(req,res){
// recieve json
json_object = .....
// Get json to your function
processJson(json_object);
// Old function stuff
.
.
.
});
function processJson(json_object) {
// Here you'll have the existing object and can process it
json_object...
}

How to save the result of d3.csv.parse to a global variable?

I have this
var result;
d3.csv("xxx.csv",function(data){
csvResultParser(data);
});
function csvResultParser(data){
//parse the data then assign it to result
}
But I still have result as "undefined", any clues?
The d3.csv() function is asynchronous. Thus, you have to wait for the data to be received before reading the result variable. This is the reason why, when dealing with asynchronous data, it is prefered to do everything inside the d3.csv() function instead of using global variables.

Sharing Functions between Chrome Extensions

I am making an extension (A) for Chrome that communicates with another extension (B). I want A to provide the B a function, but it won't send. I can send strings just fine.
A has the following code. rect is the function in this code.
chrome.extension.onRequestExternal.addListener(
function(request, sender, sendResponse) {
obj = {}
obj.permisions = "all"
obj.rect = Rect
alert(obj.permisions+","+obj.rect)
sendResponse(obj);
});
...this code works just fine. The alert shows a box that says "all", then prints out the function.
B has the following code.
chrome.extension.sendRequest(ext[i].id, {}, function(lib) {
alert(lib.permisions+","+lib.rect)
});
The alert on this one shows "all,undefined". Can functions not be passed between extensions?
While you can certainly communicate between extensions, you can only pass valid JSON. Unfortunately, valid JSON only includes simple data types(String, Number, Boolean, Array, Object* or Null).
One way to do it would be to pass the function as a String and use eval on the receiving end. Could be unsafe, but is doable.
* While a function is technically an Object, in this context Object refers to name:value pairs of the aforementioned simple data types.