谷歌应用 json 数据从 code.gs 到 html 下拉列表答案

【问题标题】：Google apps json data from code.gs to html dropdown谷歌应用 json 数据从 code.gs 到 html 下拉列表
【发布时间】：2021-05-20 09:49:40
【问题描述】：

我正在创建一个谷歌应用程序脚本，并试图将 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>

code.gs：

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();
}

【问题讨论】：

对不起，我的回答延迟了，我周末不在。
在Page.html 中，您调用的是函数).get_people();，但在Code.gs 中，函数的名称为getPeople()。尝试修复它。
我真的希望你能看到我现在的脸有多难。它现在完美运行。非常感谢你的帮助，你太棒了！
其实这对我来说很多都是新事物。我也很高兴知道它是如何工作的。

标签： javascript html json google-apps-script

【解决方案1】：

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

这是一个带有select 标签的简单示例：

Code.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('Template')
  template.people = getPeople()
  return template.evaluate()
}

function getPeople() {
  const url = 'url for the api call'
  const res = UrlFetchApp.fetch(url, {'api stuff here, it works i have tested it'}})
  const txt = JSON.parse(res.getContentText())
  
  return txt.data.map(function (a) { 
    return [a.firstName, a.lastName]
  })
}

Template.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select>
      <? for (let person of people) { ?>
        <option><?= person[1] ?>, <?= person[0] ?></option>
      <? } ?>
    </select>
  </body>
</html>

参考文献

【讨论】：

感谢您的评论和提醒一件事。我项目中的 html 内容旨在在谷歌电子表格中创建一个可按下的按钮和弹出窗口。我已经设法完成了。然后下拉选择器应该进入弹出窗口
@Roni 那么你应该看看w3schools.com/howto/howto_js_dropdown.asp（正如 Yuri Khristich 链接的那样）。您只需要稍微修改一下：添加<base target="_top"> 并使用模板循环生成a 元素。如果您似乎无法使其正常工作，请告诉我们您尝试了什么以及哪些行为未达到预期。

【解决方案2】：

可以通过多种方式完成。例如：

https://www.w3schools.com/howto/howto_js_dropdown.asp

// here is your list of people
var people = [
    { firstName: "John", lastName: "Smith" }, 
    { firstName: "Roni", lastName: "from StackOverflow" }
];

function populate_menu(people) {
    for (var dude of people) {
        var newlink = document.createElement("a");
        newlink.textContent = dude.firstName + " " + dude.lastName;
        newlink.href = "#";   // <-- here you can add some function or url
        document.getElementById("myDropdown").appendChild(newlink);
    }
}

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 300px;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

<body onload="populate_menu(people)">

    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Dropdown list</button>
        <div id="myDropdown" class="dropdown-content">
            <!-- here will be autogenerataed list -->
        </div>
    </div>

<body>

但我也不是专家。

第二次尝试

代码.gs：

function doGet() {
  var html = HtmlService.createTemplateFromFile("template").evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, "List");
}

function get_people() {
  // var people = [
  //   { firstName: "John", lastName: "Smith" },
  //   { firstName: "Roni", lastName: "from StackOverflow" }
  // ];

  var people = [
    [ "John", "Smith" ],
    [ "Roni", "from StackOverflow"]
  ];

  return people;
}

模板.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>

重点是函数doGet()的输出转到SpreadsheetApp.getUi().showModalDialog()

【讨论】：

感谢您的评论！我尝试了这个解决方案并进行了一些修改，但我无法让它工作
看我的第二次业余尝试）
您好，我设法在下拉菜单中获得了某种输出，但它只显示“未定义未定义”
可能数组people 无法访问您的html。或者数组为空。或者您未能将数组中的值放入 html 文件的列表中。如果您不显示代码（gs 和 html），则很难猜测。
我知道我的数组通过了 html，它显示了正确数量的值，我在数组中有 3 个人，html 弹出窗口显示 3 次“未定义未定义”。我认为这与解析数据和地图函数有关