Javascript Google apps json数据从code.gs到html下拉列表_Javascript_Html_Json_Google Apps Script

Javascript Google apps json数据从code.gs到html下拉列表

javascript html json google-apps-script

Javascript Google apps json数据从code.gs到html下拉列表,javascript,html,json,google-apps-script,Javascript,Html,Json,Google Apps Script,我正在创建一个GoogleApps脚本，并试图将json数据从code.gs下载到html文件下拉列表中。我真的不知道这是怎么做到的，因为我对JS和谷歌自己的东西没有那么丰富的经验。代码如下： function PopulateDropDownList() { var url = 'url for the api call' var res = UrlFetchApp.fetch(url, {'api stuff here, it works i have tested it'}}) va

我正在创建一个GoogleApps脚本，并试图将json数据从code.gs下载到html文件下拉列表中。我真的不知道这是怎么做到的，因为我对JS和谷歌自己的东西没有那么丰富的经验。代码如下：

function PopulateDropDownList() {

var url = 'url for the api call'

var res = UrlFetchApp.fetch(url, {'api stuff here, it works i have tested it'}})

var json = res.getContentText()
var txt = JSON.parse(json)

people = txt.data.map(function (a) { 
  return [a.firstName, a.lastName]; 
})

Logger.log(people)
return people
       
    }

问题是，如何将人员列表添加到html下拉选择中？我知道这和脚本标签有关，但我真的不知道怎么做。我也尝试过goolge.script.run.myFunction，但我不知道如何从那里开始

编辑：

HTML文件

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select id="droplist">
      </select>
      <script>
      (function () {
        google.script.run.withSuccessHandler(
          function(people) {
            var select = document.getElementById("droplist");
            for( var dude of people) {
              var option = document.createElement("option");
              // option.text = dude.firstName + " " + dude.lastName;
              option.text = dude[0] + " " + dude[1];
              select.add(option);
            }
          }
        ).get_people();
      }());
    </script>
  </body>
</html>

这可以通过多种方式实现。例如：

//这是你的名单 var people=[ {姓：约翰，姓：史密斯}， {firstName:Roni，lastName:from StackOverflow} ]; 函数填充菜单用户{ 为了一群人{ var newlink=document.createElementa； newlink.textContent=dude.firstName++dude.lastName； newlink.href=；//

我猜您正在使用HtmlService生成一个动态站点。如果是这样，您可以使用模板动态生成HTML。在项目中创建一个新的HTML文件，并使用它生成您想要的HTML

下面是一个带有select标记的简单示例：

代码.gs

函数doGete{ const template=HtmlService.createTemplateFromFile'template' template.people=getPeople 返回模板。评估 } 函数getPeople{ const url='api调用的url' const res=UrlFetchApp.fetchurl，{'api的东西在这里，它可以工作，我已经测试过了'}} const txt=JSON.parsers.getContentText 返回txt.data.mapfunction a{ 返回[a.firstName，a.lastName] } } Template.html

, 工具书类

感谢您的评论和提醒。我的项目中的html内容是为了在谷歌电子表格中创建一个可按下的按钮和弹出窗口。这一点我已经做到了。然后下拉选择器应该进入popup@Roni然后你应该看一下Yuri Khristich的链接。你只需要稍微修改一下：add并使用模板循环生成a元素。如果您似乎无法使其正常工作，请告诉我们您尝试了什么，以及哪些操作不符合预期。感谢您的评论！我尝试了此解决方案，但做了一些修改，但无法将其发送到工作人员我的第二次业余尝试您好，我设法将某种输出发送到下拉列表，但它是displays only Undefined Undefined可能数组中的人无法访问你的html。或者数组是空的。或者你无法将数组中的值放入html文件的列表中。如果你不显示代码gs和html，很难猜到。我知道我的数组通过html显示，它显示了正确的值量，我有3个人数组和html弹出窗口显示了3次未定义。我认为这与数据和地图函数中的parsin有关抱歉，我周末不在。在Page.html中，你调用了函数。get_people；但在Code.gs中，函数名为getPeople。尝试修复它。我真的希望你能看到有多困难我现在正在做面部按摩。它现在很好用。非常感谢你的帮助，你真是太棒了！事实上，很多这对我来说都是新鲜事。我也很高兴我学会了它的工作原理。

function getPeople() {
 /*json stuff here*/
    var json = res.getContentText()
    var txt = JSON.parse(json)

    var people = txt.data.map(function (a) { 
      return [a.firstName, a.lastName]
      })
     Logger.log(people)
     return people
}

function showDialog() {
  var html = HtmlService.createTemplateFromFile("Page").evaluate();
  // return html;
  SpreadsheetApp.getUi().showModalDialog(html, "List");
}

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('choose person')
      .addItem('search', 'showDialog')
      .addToUi();
}