用 google.script.run 替换 var答案

【问题标题】：Replace a var with google.script.run用 google.script.run 替换 var
【发布时间】：2020-07-05 16:38:35
【问题描述】：

我在 js 方面非常基础，我对以下代码有一点问题。

我如何将var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}];（在 HTML 和 Javacript 端）与一种getArray()（在 Google 脚本端）联系起来，以获得与这篇帖子 Share data from .gs (Google Apps Script) to <script> variable in html 类似的结果，但是，使用“边缘”而不是“节点”？

可以是google.script.run.withSuccessHandler(nodes, edges => {...}).coneArray().edgeArray();?

Google 脚本端

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

function include() {
  return HtmlService.createHtmlOutputFromFile().getContent();
}

//-----------------------------------------------------------------------------------Global variables

var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

//-----------------------------------------------------------------------------------Nodes function

function coneArray(){
  
  const data = ss.getRange(2,1,ss.getLastRow()-1,5).getValues();

  let nodeArray = []
  
  data.forEach(element => {
    let obj = {}
    obj.id = element[4]
    obj.label = element[0]
    obj.group = element[1]
    obj.x = element[2]
    obj.y = element[3]
    nodeArray.push(obj)
    return element
    }
  )
  Logger.log(nodeArray);
  return nodeArray;
}

//-----------------------------------------------------------------------------------Edges function

function lineArray(){
  
  const data = ss.getRange(2,5,ss.getLastRow()-1,2).getValues();

  let edgArray = []
  
  data.forEach(element => {
    let obj = {}
    obj.to = element[1]
    obj.from = element[0]
    edgArray.push(obj)
    return element
    }
  )
  Logger.log(edgArray);
  return edgArray;
}

HTML 和 Javacript 端

<!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>
<input type="button" value="Reload" onclick="google.script.run.showBox()" />
<div id="mynetwork"></div>
<script type="text/javascript">

var container = document.getElementById('mynetwork');
var options = {edges: {smooth: false}, physics: {enabled: false}, nodes: {shape: "square",size: 10}};

var edges = [{from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5}, {from: 3, to: 3}];

google.script.run.withSuccessHandler(nodes => {
  var data = {nodes: nodes, edges: edges};
  var network = new vis.Network(container, data, options);
}).coneArray();

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

提前，非常感谢！

PS：目标是将节点与谷歌电子表格中的边缘数据连接起来。

PS：我分享整个代码，因为其中一部分没有意义。

【问题讨论】：

感谢您的回复。在您的情况下，如何在 GAS 端的一个函数中调用这两个函数？在这种情况下，我认为你的目标可以通过一个电话google.script.run来实现。这个怎么样？
我不知道该怎么做：/如果你能解释我，我会非常感谢你。我也可以再次与您分享谷歌表格Google Spreadsheets
感谢您的回复。我提出了一个修改后的脚本作为答案。你能确认一下吗？如果这不是您想要的方向，我很抱歉。

标签： javascript google-apps-script google-sheets vis.js vis.js-network

【解决方案1】：

在您的情况下，Google Apps 脚本中有 coneArray() 和 edgeArray() 两个函数。您想从这两个函数中检索值并使用这些值，您想使用 vis.js。

我可以像上面那样理解。如果我的理解是正确的，那么下面的修改呢？

在本次修改中，coneArray() 和 edgeArray() 的值都被检索，检索到的值用于 vis.js。

Google Apps 脚本方面：

请将以下脚本添加到 Google Apps 脚本中。

const sample = () => ([coneArray(), edgeArray()]);

HTML 和 Javascript 方面：

请将google.script.run的脚本替换为如下。

google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {nodes: nodes, edges: edges}, options)).sample();

注意：

如果你想从 Javascript 调用每个函数，你也可以使用下面的 Javascript 作为一个简单的脚本。但我想推荐上面修改过的脚本。

google.script.run.withSuccessHandler(nodes => {
  google.script.run.withSuccessHandler(edges => {
    new vis.Network(container, {nodes: nodes, edges: edges}, options)
  }).edgeArray();
}).coneArray();

【讨论】：

@Mario IR 感谢您的回复。我带来的不便表示歉意。在您的问题中，使用了google.script.run.withSuccessHandler(nodes, edges => {...}).coneArray().edgeArray();。所以我提议const sample = () => ([coneArray(), edgeArray()]);。但是当我看到您共享电子表格的脚本时，我可以确认有两个函数 coneArray() 和 lineArray() 用于发送值。您的问题似乎与您共享的电子表格不同。这个怎么样？在这种情况下，const sample = () => ([coneArray(), lineArray()]); 怎么样？
@Mario IR 感谢您的回复。我想确认一下您目前的情况。因为不幸的是，来自it does not worked，我无法了解您目前的情况。我对此深表歉意。用于复制当前问题的当前脚本包含在共享电子表格中。我的理解正确吗？
@Mario IR 感谢您的回复。当我在共享电子表格中看到您当前的脚本时，我可以理解我的回答并未反映在您的脚本中。你能反映我对你的脚本的回答并再次测试吗？不幸的是，我无法理解it does not worked。
@Mario IR 感谢您的回复。从您的回复中，我可以理解我的评论提议没有被使用。这是因为我的英语水平不好。我对此深表歉意。能不能把const sample = () => ([coneArray(), edgeArray()]);修改成const sample = () => ([coneArray(), lineArray()]);再测试一下？ Ref
现在可以使用了！男人你的真棒。抱歉出现问题并感谢您的耐心等待！现在我可以将它用作思维导图了！