Google App Script Web App 不加载数据（有时）答案

【问题标题】：Google App Script Web App not loading data (sometimes)Google App Script Web App 不加载数据（有时）
【发布时间】：2021-02-23 03:13:32
【问题描述】：

我正在制作一个 Google Script Web App，它会自动生成索引，从电子表格中获取数据。

我目前在加载 Web 应用时遇到问题。下拉菜单中的数据有时不会加载。这通常发生在下拉菜单加载后快速打开时。我猜这是因为在从电子表格获得的数据加载到其中之前显示了一个下拉列表，导致下拉列表中的数据加载被“取消”。

我想知道是否有人有解决方案或知道为什么会发生这种情况，因为我的只是一个假设。

我的 GS 代码：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index1');
}

const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Auto-Index");
const sectionsLenghtData = ss.getRange("E1").getValue();
const sectionsLenght = "A1:B"+sectionsLenghtData;

const procedLenghtData = ss.getRange("E2").getValue();
const procedLenght = "H1:N"+procedLenghtData;

//READS THE PHONE BRANDS
function readProcedSections() {
    var data = ss.getRange(sectionsLenght).getValues();
    Logger.log(data)
    return data
}

//READS THE PHONES
function readProcedData() {
    var data = ss.getRange(procedLenght).getValues();
    Logger.log(data)
    return data
}

用 GS 读取的数据被加载到这个 HTML

<!doctype html>
<html lang="en">
  <head>
    <base target="_top">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

    <title>BIND - Procedimientos y Políticas</title>
    <style>
        body {
          margin-left: 1rem;
          margin-right: 1rem;
        }

        #loadingDiv {
          background-color: #fff;
          position: fixed;
          width:100%;
          height:100%;
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #pills-load {
          height: 30px;
          width: 100px;
        }

        #loadingSpinner {
        }

        .navbar {
          background-color: #fff;
          padding-top: 1rem;
          position: sticky;
          top:0;
          width:100%;
          z-index:100;
        }

        .accordion-button:hover {
          color: #0d6efd;
        }

        .search {
          float: float;
          width: 25%;
          margin-left: 1rem;
        }

        #lupa {
          margin-bottom: 0.3rem;
        }

        .nav {
          float: left;
          width: 73%;
        }

        .nav-link {
          color: #343a40;
        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
          font-weight: 600;
          color: #0d6efd;
        }

        li {
            list-style-type: none;
        }
        
        .accordion {
            margin-bottom: 0.4rem;
            margin-left:0.5rem;
            margin-right: 0.5rem;
        }
        
        a {
            display: block;
            text-decoration: none;
            margin-bottom: 0.3rem;
        }

        n1 {

        }

        .n2 {
            font-size: 0.97rem;
        }

        .n3 {
          font-size: 0.97rem;
        }

        .n4 {
          font-size: 0.97rem;
        }

        .proced {
          display: flex;
        }

        .material-icons {
          margin-left: 0.8rem;
          height: 1rem;
          width: 1rem;
          color: #343a40;
          
        }

        .material-icons:hover {
          color:#0d6efd;
        }

        .sinHijos .material-icons {
          display: none;
        }

        .cardn1 {
          margin-left: 2.6rem;
        }

        .cardn2 {
          margin-left: 2.6rem;
        }

        .cardn3 {
          margin-left: 5.2rem;
        }

        .cardn4 {
          margin-left: 7.8rem;
        }

        #listPoliticas {
          margin-left: 1rem;
        }

        #index {
          margin-top: 0.4rem;
        }
        

    </style>
    <script>
    </script>

  </head>
  <body>

    <div class="navbar">

      <ul class="nav nav-tabs">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="pills-proced" data-bs-toggle="pill" data-bs-target="#pills-proced" type="button" role="tab" aria-controls="pills-proced" aria-selected="true" onclick="showHideProcedimientos()">Procedimientos</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-polit" data-bs-toggle="pill" data-bs-target="#pills-polit" type="button" role="tab" aria-controls="pills-polit" aria-selected="false" onclick="showHidePoliticas()">Políticas</button>
        </li>
      </ul>

      <div class="search">
        <form class="d-flex">
          <input class="form-control me-2" id="inputsearch" type="search" placeholder="Buscar" aria-label="Buscar">
          <button class="btn btn-primary" id="searchbutton" type="submit">
            <svg id="lupa" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
          </button>
        </form>
      </div>

    </div>

    <div class="accordion accordion-flush" id="index">

    </div>

    <div class="accordion accordion-flush" id="politicas" style="display: none;">
      <div class="card card-body">
        <li id="listPoliticas">

        </li>
      </div>
    </div>

    <script>

      function getProcedSections(values) {
          var x = document.getElementById("index");
          values.forEach(function(item) {
          //x.innerHTML += '<h2 id="'+ item[1] +'">'+ item[0] +'</h2>';
          x.innerHTML += '<div class="accordion-item"><h2 class="accordion-header" id="flush-heading"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse'+item[1]+'" aria-expanded="false" aria-controls="flush-collapse'+item[1]+'">'+ item[0] + '</button></h2><div id="flush-collapse'+item[1]+'" class="accordion-collapse collapse" aria-labelledby="flush-heading'+item[1]+'" data-bs-parent="#index"><div class="accordion-body" id="'+item[1]+'"></div></div></div>'
          });
        }
        google.script.run.withSuccessHandler(getProcedSections).readProcedSections();

        
        function getProcedData(values) {
          var x = document.getElementById("index");
          values.forEach(function(item) {
          var y = document.getElementById(item[4]);
          y.innerHTML += '<div class="proced '+item[6]+'"><a class="'+ item[3] +' link" href="'+item[2]+'" target="_blank">'+ item[1] +'</a><a class="material-icons" data-bs-toggle="collapse" href="#'+item[5]+'" role="button" aria-expanded="false" aria-controls="collapse'+item[5]+'">keyboard_arrow_down</a></div><div class="collapse card card-body card'+item[3]+'" id="'+item[5]+'"></div>'
          });
          return;
        }
        google.script.run.withSuccessHandler(getProcedData).readProcedData();

        function showHidePoliticas(){
          document.getElementById("index").style.display="none";
          document.getElementById("politicas").style.display="inline";
        }

        function showHideProcedimientos() {
          document.getElementById("politicas").style.display="none";
          document.getElementById("index").style.display="inline"
        }

    </script>



    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>

这里是 Web 应用程序和电子表格的链接。

https://script.google.com/macros/s/AKfycbz37hctjTKMHodsQh0JKqutxTsbasUj9WRRRxBNEtCb1nGoXm5GbZGKxg/exec

https://docs.google.com/spreadsheets/d/1-bKLOHzCOTx0E6LMR06h8qpNH8vxKVTBVz3srHVY_qQ/edit?usp=sharing

【问题讨论】：

标签： html google-apps-script google-sheets

【解决方案1】：

在全局范围内调用电子表格服务并不是一个好主意，因为每次一个函数被doGet、google.script.run 等简单触发器调用时，这些调用都会被执行。

另一方面，由于您需要下拉选项在显示后立即可用，因此最好不要在加载下拉选项后读取下拉选项，而是在此之前执行此操作。

有几种方法可以做到这一点。一种方法是使用templated HTML，而不是立即提供 HTML。

如果您还不想学习使用模板化 HTML，您可以通过对服务器端调用的一次调用来检索您需要的所有值来提高 Web 应用程序的性能。