Организовать / Сгруппировать HTML таблиц по определенному признаку

Question

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

Фактический результат:

Answer 1

Если вы считаете, что вам нужно отсортировать и сгруппировать массив, прежде чем перебирать его. Вот пример того, как заменить l oop.

<input type="text" id="myInput" onkeyup="searchTable()" placeholder="Search by Program Name" title="Enter Program Name">

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}
window.addEventListener("load", function () {
  Promise.all([
    loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
        .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";

      var sortedObj = {}
objItems.forEach(item => {
  var program = item.Program;
  delete(item.Program); //remove this line to keep the program in the item data
  if (!sortedObj[program]) {
    sortedObj[program] = [];
  }
  sortedObj[program].push(item);
});

//sort by deliverable
Object.keys(sortedObj).forEach(key => {
  sortedObj[key]
    .sort((a, b) => {
      if (a.Deliverable === b.Deliverable) {
        return 0;
      }
      return a.Deliverable > b.Deliverable ? 1 : -1;
    })
});

Object.keys(sortedObj).forEach((key, index) => {
  tableContent += "<tr id='parent-" + index + "' class='parent'>";
  tableContent += "<td>" + key + "</td>";
  tableContent += "</tr>";
  sortedObj[key].forEach(obj => {
    tableContent += "<tr class='child child-" + index + "'>";
    tableContent += "<td> </td>";
    tableContent += "<td>" + obj.To + "</td>";
    tableContent += "<td>" + obj.Date + "</td>";
    tableContent += "<td>" + obj.Approved + "</td>";
    tableContent += "<td>" + obj.Notes + "</td>";
    tableContent += "<td>" + obj.Deliverable + "</td>";
    tableContent += "</tr>";
  });
});
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});**strong text**