將 .gs（Google Apps 腳本）中的數據共享到<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"}
]

你好！ 在以下代碼中，函數getArray()返回此字符串 ↑。 你知道如何將它與 .html 中的變量節點連接起來嗎？ 我貼了代碼，謝謝！

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>

回顧：我的目標是將 .gs 中返回的“obj”用作 .html 中的 var“nodes”。 我不知道編程演講是否正確。 謝謝！

如果有人可以分享我的代碼，我會非常感謝你，謝謝！

Answer 1

這個改裝怎么樣？ 請將此視為幾種可能的答案之一。

改裝要點：

在這個答案中， nodes的值由google.script.run檢索。
在 GAS 端的getArray()處，該值作為對象返回。
在 Javascript 端， nodes對象用於 vis.js。

修改腳本

Google Apps 腳本方面：

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 和 Javascript 方面：

<!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>

參考：

類 google.script.run

將 .gs（Google Apps 腳本）中的數據共享到<script> variable in html

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-25 01:37:53

改裝要點：

修改腳本

Google Apps 腳本方面：

HTML 和 Javascript 方面：

參考：

將 .gs（Google Apps 腳本）中的數據共享到<script> variable in html

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-25 01:37:53

改裝要點：

修改腳本

Google Apps 腳本方面：

HTML 和 Javascript 方面：

參考：

解決方案1
1 已采納 2020-03-25 01:37:53