Использование цикла for для таблицы или массива для объединения нескольких записей для одних и тех же категорий - PullRequest
0 голосов
/ 18 мая 2018

Таблица взята из запроса MySQL Example Table

Веб-страница, которую в настоящее время создает мой код: Web Page

Данные длятаблица поступает из БД с использованием набора результатов JDBC для подключения БД к Google Apps Script, а затем этот запрос используется для создания Google Sheet.Как видите, цикл for на странице HTML создает несколько отделов для каждого сотрудника этого отдела.Я хотел бы, чтобы объединить этих сотрудников, например, с Производство: Магазин в столбце А, нужно в одном столбце «Производство: Магазин» на веб-странице.Можно ли изменить цикл for для его создания или настроить запрос?

Код My Apps Script HtmlTemplate для создания веб-страницы (теги скриптлета <? и <?= позволяют использоватьПеременные JS во время оценки шаблона):

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <header> 
    <h1 class="Title">Current Status</h1>
  </header>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <? for(var i = 1; i < data.length; i++){ ?>
    <div>
    <!--<h2><?= data[i].Employee ?></h2>-->
    </div>
    <div class="data">
      <div class="dataHeader">
        <h2 class="dataHeaderText">
          <?= data[i].task_name ?>
        </h2>
      </div>
      <h2> Current Workers</h2>
      <div class="col-container">
        <div class="col" style="background:#535351">
          <h2>Employees</h2><hr> 
          <h4><?= data[i].LastFirstName ?> <br/> </h4>
        </div>
        <div class="col" style="background:#0b3e6b">
          <h2>Date/Time</h2><hr>
          <h4> <?=
            (data[i].DateTime.getMonth() + 1) + "/" +
            data[i].DateTime.getDate() + "/" +
            data[i].DateTime.getFullYear() + " " +
            data[i].DateTime.getHours() + ":" + data[i].DateTime.getMinutes();
          ?> </h4>
        </div>
        <div class="col" style="background:#535351">
          <h2>Duration</h2><hr>
          <h4> <?= data[i].Duration + "\r" ?> </h4>
        </div>
      </div>
    </div>
  <? } ?>
</body>
</html>

1 Ответ

0 голосов
/ 20 мая 2018

Вы можете сделать это, изменив свои данные, а также изменив свой код HtmlTemplate - запрос к базе данных изменять не нужно.

В настоящее время у вас есть for цикл с одним уровнем, и не проверяйте эквивалентность между записями в вашем результате запроса.Таким образом, вы получаете 1 столбец веб-страницы для каждой строки.Чтобы объединить сотрудников из одного и того же отдела в один и тот же столбец (чтобы у вас был только 1 столбец веб-страницы на отдел, а не 1 столбец веб-страницы на результат запроса), вы должны изменить используемый вами результат.

Одно возможное изменение,использовать переменную data из Array в ассоциативную Object, чтобы она выглядела как {"Operations:Accounting":{"John Smith":{clockTime: ..., duration: 3.56}, "Jane Doe":{clockTime: ..., duration: 0.53}, ... }, "Production:Shop": {...}, ... }.
Тогда вы бы скорректировалиfor цикл для доступа к каждому свойству (объекту "Сотрудник") каждого ключа (объекту "Отдел") вашего объекта data.Обратите внимание, что это вложенный цикл for.

function serveWebpage(e) {
  var template = HtmlService.createTemplateFromFile("myfile");
  template.data = transformQueryResult_(getQueryResult_(e));
  return template.evaluate();
}

function transformQueryResult_(queryArray) {
  var output = {},
      departmentIndex = 0,
      employeeNameIndex = 1,
      clockIndex = 2,
      durationIndex = 3;
  for (var r = 0; r < queryArray.length; ++r) {
    var row = queryArray[r];
    var dept = row[departmentIndex],
        empName = row[employeeNameIndex],
        clock = row[clockIndex],
        duration = row[durationIndex];

    // Create this department if necessary.
    if (!output[dept]) output[dept] = {};

    // Create this employee if necessary.
    if (!output[dept][empName]) output[dept][empName] = {};

    // Set the employee's clockTime property and duration property
    // Assumption: an employee appears only once in the query for a given department.
    // (i.e. only a single clockTime and duration for an employee will be displayed)
    output[dept][empName].clockTime = row[clockIndex];
    output[dept][empName].duration = row[durationIndex];
  }
  return output;
}

В вашем файле HtmlTemplate вы затем выполните итерации по отделам, а затем по сотрудникам, используя скриптлетов в качественеобходимо:

for (var dept in data) {
  /* Add code to create a webpage column for the department roster */
  for (var emp in data[dept]) {
    /* Add code to use the data[dept][emp].clockTime and data[dept][emp].duration values */
  }
  /* Add necessary closing tags for the column*/
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...