Share data from .gs (Google Apps Script) to <script> variable in html

Question

[
  {"id":1,"label":"Node 2"},
  {"id":2,"label":"Node 3"},
  {"id":3,"label":"Node 4"},
  {"id":4,"label":"Node 5"}
]

Hi! In the following code, the function getArray() returns this string ↑. Do you know how to connect it with the variable nodes in the .html . I pasted the codes, Thanks!

function getArray(){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = ss.getRange(1,1,ss.getLastRow()-1,2).getValues();

  let objArray = []
  data.forEach(element => {
    let obj = {}
    obj.id = element[0]
    obj.label = element[1]
    objArray.push(obj)
    return element
    }
  )
var obj = JSON.stringify(objArray);
//Logger.log(obj);
return obj;
}

<!doctype html>
<html>
<head>
  <title>Network</title>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">

var nodes = [
  {"id":1,"label":"Node 2"},
  {"id":2,"label":"Node 3"},
  {"id":3,"label":"Node 4"},
  {"id":4,"label":"Node 5"}
];

</script>
</body>
</html>

Recap: My goal is use the returned "obj" in .gs as var "nodes" in .html. I don't know if the programming speech its correct. Thanks!

If some can share me the code, im going to thanks you a lot thanks!

Welcome to StackOverFlow please take this opportunity to take the tour and learn how to How to Ask, format code and minimal reproducible example. Google Apps Script Documentation. — Cooper
– Cooper, Commented Mar 25, 2020 at 0:02
Although I'm not sure whether I could correctly understand about your goal, for example, how about modifying var nodes = [...] to google.script.run.withSuccessHandler(nodes => console.log(nodes)).getArray() in HTML side? Ref — Tanaike
– Tanaike, Commented Mar 25, 2020 at 0:04
Thank you for replying. I have to apologize for my poor English skill. Unfortunately, I cannot understand about your situation from Doesn't work. And I cannot understand about use the returned "obj" in .gs as var "nodes" in .html. Because google.script.run.withSuccessHandler(nodes => console.log(nodes)).getArray() brings the values from returned from getArray() to HTML side. So can you provide the detail information for replicating Doesn't work? From this, I would like to try to understand about your goal. — Tanaike
– Tanaike, Commented Mar 25, 2020 at 0:21
If you want to merge content into HTML when the HTML loads, then you can use Templated HTML with scriptlets. If you want to retrieve data after the HTML has loaded, and inject content you'll need to use google.script.run.withSuccessHander(fncNameToHandleReturn).fncNameHere() and then use JavaScript and the DOM to manipulate the HTML in the browser. Do you want the content to be merged when the HTML first loads, or at some point afterwards? — Alan Wells
– Alan Wells, Commented Mar 25, 2020 at 0:36
I saw your whole script in your shared Spreadsheet. Can you show the script in your question? By this, users can see your whole script. By the way, in your case, nodes is required to be used as an object. So I think that return objArray is used instead of return obj in getArray(). By this, I think that nodes returned by google.script.run.withSuccessHandler(nodes => console.log(nodes)).getArray() can be used for your script. How about this? — Tanaike
– Tanaike, Commented Mar 25, 2020 at 1:15

halfer · Accepted Answer · 2023-07-09 21:46:54Z

1

Modification points:

In this answer, the value of nodes are retrieved by google.script.run.
At getArray() in GAS side, the value is returned as an object.
At JavaScript side, the object of nodes is used for vis.js.

Modified script

Google Apps Script side:

function showBox() {
   var template = HtmlService.createTemplateFromFile("Map");
   var html = template.evaluate();
   html.setHeight(450).setWidth(650);
   SpreadsheetApp.getUi().showModalDialog(html, "New Title");
}

function getArray(){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = ss.getRange(1,1,ss.getLastRow()-1,2).getValues();
  
  let objArray = []
  data.forEach(element => {
    let obj = {}
    obj.id = element[0]
    obj.label = element[1]
    objArray.push(obj)
    return element
    }
  )
  return objArray;  // Modified
}

HTML and Javascript side:

<!doctype html>
<html>
<head>
  <title>Network</title>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
<div id="text"></div>
<div id="mynetwork"></div>
<script type="text/javascript">

// Modified
google.script.run.withSuccessHandler(nodes => {
  var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}];
  var container = document.getElementById('mynetwork');
  var data = {nodes: nodes, edges: edges};
  var options = {edges: {smooth: false}, physics: {enabled: false}};
  var network = new vis.Network(container, data, options);
}).getArray();

</script>
</body>
</html>

Reference:

Class google.script.run

edited Jul 9, 2023 at 21:46

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 25, 2020 at 1:37

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mario IR Over a year ago

You are great! Thanks a lot, and no problem with share the result!

Tanaike Over a year ago

@Mario IR Thank you for replying. I'm glad your issue was resolved.

Mario IR Over a year ago

sorry, can you help me with another related thing? Do you know how can i do the same thing but now with the edges?. At this time im create a new function getArray() but now for the edges. The point now its to remplace the var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}]; Thanks!

Tanaike Over a year ago

@Mario IR I have to apologize for my poor English skill. Unfortunate, about your new question, I couldn't understand about what you want to do and your new issue. Can I ask you about the detail of it?

Tanaike Over a year ago

@Mario IR Thank you for replying. Although I'm not sure about getEdgesArray(), as a simple method, if getEdgesArray() is Google Apps Script side, how about calling getEdgesArray() in the function of getArray() and returning both values to Javascript side?

|

Collectives™ on Stack Overflow

Share data from .gs (Google Apps Script) to <script> variable in html

1 Answer 1

Modification points:

Modified script

Google Apps Script side:

HTML and Javascript side:

Reference:

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Modification points:

Modified script

Google Apps Script side:

HTML and Javascript side:

Reference:

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related