Получить имена и значения ссылок при зацикливании элементов HTML с помощью Javascript

Question

Я создаю веб-приложение для электронной таблицы для боковой панели.

Попытка обработать обработчик событий, который реализует эти условия:

• при установке флажков (которые имеют соответствующие имена и ссылки в календаре для этих имен)
• и выбор 2 дат
• и затем нажав кнопку

После того, как все это сделано, из бэкэнда вызывается функция, которая получает события для этих имен и записывает их на лист.

Я не могу получить значения для имен и календарей в цикле . И не уверен, что это хороший способ поставить их. Я пытался справиться с этим по-разному - не повезло.

Я со временем сузил все вопросы до этих 2 частей:

1) как наилучшим образом загрузить данные на боковую панель.

2) как пройти через эти данные после взаимодействия пользователя с этими элементами и получить значения (зависит от части 1).

Я был бы очень признателен, если бы кто-нибудь помог мне немного больше (некоторые довольно простые решения).

Вот вариант с скриптлетами для использования GAS в html-файле:

<? for (var i = 0; i < loopNamesForSidebar().names.length; i++) {  ?>
    <label>
       <input type="checkbox" class="filled-in check" checked="checked" />
       <span>
         <div class="collection">     
           <a href=" <?= loopNamesForSidebar().calendars[i] ?>" class="collection-item" >
             <?= loopNamesForSidebar().names[i]  ?>
           </a>
         </div>
       </span>
<? } ?>
    </label>

loopNamesForSidebar() - это бэкэнд-функция, которая зацикливает имена и календари на боковую панель. Каждый раз, когда я открываю боковую панель, эти данные обновляются. Я не использовал его в моей передней части.

Вот код Javascript в html-файле:

   //import jobs from calendars to sheet 
function importJobs() {
  //getting all checkboxes
  var allCheckboxes = document.getElementsByClassName("check")

  //getting inputs of start and end dates
  var startDate = document.getElementById("startDate").value
  var endDate = document.getElementById("endDate").value

  var chosenNames = []
  var calendars = []

  //looping all checkboxes
  for (var i = 0; i < allCheckboxes.length; i++) {
    //getting value of each checkbox
    var checkbox = allCheckboxes[i].checked;

    //if checkbox is checked
    if (checkbox == true) {
      //getting correspondant employee name
      var name = loopNamesForSidebar().names[i]

      //and push it to an array
      chosenNames.push(name)

      //getting correspondant employee calendar
      var cal = loopNamesForSidebar().calendars[i]
      calendars.push(cal)

    } else {
      continue;
    }
  };

  //push names and cals to object
  var employees = {
    names: chosenNames,
    cals: calendars
  }

  //call function to get calendar events
  google.script.run.getEvents(employees, startDate, endDate)
};

Answer 1

Per Рекомендации , вы должны загружать любые выходные данные вызова API / ___ Service асинхронно. Я бы использовал оценку шаблона только для тривиально вычисленных / извлеченных данных, например, из PropertiesService, CacheService, статических определений или простых поисков на основе входных параметров (то есть данных строки запроса / полезной нагрузки для триггерных функций doGet и doPost). Если это занимает в среднем более четверти секунды, это слишком медленно для синхронного использования.

так:

function templateOK(param) {
  const val = PropertiesService.getScriptProperties().getProperty(param);
  return val ? JSON.parse(val) : [
    "name 1", "name 2", "name 3"
  ];
}
function shouldRunAsync(param) {
  const sheet = param ? SpreadsheetApp.getActive().getSheetByName(param) : null;
  return sheet ? sheet.getDataRange().getValues() : [];
}

Если вы правильно настроили другие части своих файлов GS и HTML, один из тегов <script> .html может выглядеть примерно так:

$(document).ready(() => loadServerData()); // jQuery
function loadServerData() {
  const TASK = google.script.run.withSuccessHandler(useNames); // has implicit failure handler of `console`
  // Schedule this to be run every so often
  const intervalMS = 10 * 60 * 1000; // 10 minutes
  setInterval(sheetName => TASK.shouldRunAsync(sheetName), intervalMS, "Names");
  // Invoke promptly too.
  TASK.shouldRunAsync("Names");
  console.log(new Date(), "Set schedule & invoked server function");
}
function useNames(serverValue, userObject) {
  console.log(new Date(), "Got Value from server", serverValue);
  // use the return value to do stuff, e.g.
  const cbDiv = $("id of div containing checkboxes"); // jQuery
  /** could add code here to read existing checkbox data, and
      use that to maintain checked/unchecked state throughout loads */
  cbDiv.innerHTML = serverValue.map((name, idx) => `<p id="${name}">${idx + 1}: ${name}</p>`).join("");
}

Как всегда, убедитесь, что вы хорошо знакомы с сериализуемыми типами данных и моделью связи клиент-сервер: https://developers.google.com/apps-script/guides/html/communication

Другие ссылки

• Element#innerHTML
• Array#map
• setInterval
• Функции стрелок
• Шаблонные литералы