Question

我尝试编写的代码可以帮助我的一些用户获取JSON响应并将其转换为Google表格中的表格。我有JSON to Table脚本的代码，由Amit Agarwal提供，网址为www.ctrlq.org。

我尝试做的方法是，Google表格会为我的用户生成弹出窗口，以便将JSON直接复制并粘贴到其中，然后它会将对象传递给JSON到Table代码。我在弄清楚如何实际做到这一点时遇到了问题。

Code.gs

function showPrompt()
{
  var ui = SpreadsheetApp.getUi(); // Same variations.
  var html = HtmlService.createHtmlOutputFromFile('Upload');
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Dialog title');

}

function setJSON(json)
{
   var json = json; //json object?   
   return json; 
}

// Written by Amit Agarwal www.ctrlq.org

function writeJSONtoSheet(json) {

  var sheet = SpreadsheetApp.getActiveSheet()[1];

  var keys = Object.keys(json).sort();
  var last = sheet.getLastColumn();
  var header = sheet.getRange(1, 1, 1, last).getValues()[0];
  var newCols = [];

  for (var k = 0; k < keys.length; k++) {
    if (header.indexOf(keys[k]) === -1) {
      newCols.push(keys[k]);
    }
  }

  if (newCols.length > 0) {
    sheet.insertColumnsAfter(last, newCols.length);
    sheet.getRange(1, last + 1, 1, newCols.length).setValues([newCols]);
    header = header.concat(newCols);
  }

  var row = [];

  for (var h = 0; h < header.length; h++) {
    row.push(header[h] in json ? json[header[h]] : "");
  }

  sheet.appendRow(row);

}

对话框HTML：

<!DOCTYPE html>
<html>
  <head> 
   <script>
   function setJSON() {
   // how do i add value to set to set JSON 
   var json = "" 
   google.script.run.setJSON(json);

   }
</script>

    <base target="_top">
  </head>
  <body>

  text text 


  <textarea rows="20" cols="20" placeholder="Paste your Data here. Do not format. Do not worry if it looks weird." name="json">DATA</textarea> 

  <input type="button" class="button" value="Submit JSON" onclick="setJSON()">



  </body>
</html>

提前谢谢！

Answer 1

这是一个通过页内菜单触发对话并将输入传递回服务器端功能的简单示例。

Code.gs

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Input Form Test')
      .addItem('Input Form', 'showInputForm')
      .addToUi();
}

function showInputForm() {
  var html = HtmlService.createHtmlOutputFromFile('inputform');
  SpreadsheetApp.getUi().showModalDialog(html, 'Input Form Test');
}

function logInput(input) {
  Logger.log(input)
}

inputform.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <script>
    function setJSON(form) {
      var jsonData = document.getElementById('json-data');
      google.script.run.logInput(jsonData.value);
      google.script.host.close();
    }
  </script>
  <body>
    <textarea id="json-data" rows="20" cols="20" placeholder="Paste your data here. Do not format. Do not worry if it looks weird." name="json">DATA</textarea> 
    <input type="button" class="button" value="Submit JSON" onclick="setJSON()">
  </body>
</html>

记录输出

单击“提交JSON”按钮并在表单中输入“test input”后，这是脚本日志中的输出：

[18-06-15 13:47:15:741 PDT] test input

注释

我在id元素

textarea

id用于以编程方式获取元素

您可能希望在setJSON()中执行一些客户端验证。例如：

验证该值是否仍然是默认值（即DATA）
验证可以成功解析JSON数据（即JSON.parse()）

使用上述验证的示例实现：

function setJSON(form) {
  var jsonData = document.getElementById('json-data');
  if (jsonData.value == 'DATA') {
    alert("Please enter JSON data into the form.");
      return;
    }
  try {
    JSON.parse(jsonData.value)
  }
  catch(e) {
    console.log(e);  // Outputs to the browser console.
    alert("Unable to parse JSON data.");
    return;
  }
  google.script.run.logInput(jsonData.value);
  google.script.host.close();
}

以适合您的使用案例，在inputform.html中，您可以将logInput()来电替换为：
- 调用JSON.parse()然后使用结果
- writeJSONtoSheet()如果您将其更新为期望文字并在功能开头添加JSON.parse()来电

在textarea中为Google Script保留价值

1 个答案:

Code.gs

inputform.html

记录输出

注释