谷歌應用 json 數據從 code.gs 到 html 下拉列表

Question

我正在創建一個谷歌應用程序腳本，並試圖將 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>

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

Answer 1

我猜您正在使用HtmlService生成一個動態站點。 如果是這樣，您可以使用模板動態生成 HTML。 在您的項目中創建一個新的 HTML 文件並使用腳本生成您想要的 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>

參考

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

關鍵是 function doGet()的 output 轉到SpreadsheetApp.getUi().showModalDialog()

谷歌應用 json 數據從 code.gs 到 html 下拉列表

問題描述

2 個解決方案

解決方案1
1 2021-05-20 11:16:19

參考

解決方案2
0 已采納 2021-05-20 10:31:38

谷歌應用 json 數據從 code.gs 到 html 下拉列表

問題描述

2 個解決方案

解決方案1 1 2021-05-20 11:16:19

參考

解決方案2 0 已采納 2021-05-20 10:31:38

解決方案1
1 2021-05-20 11:16:19

解決方案2
0 已采納 2021-05-20 10:31:38