Организовать HTML стол (с jQuery?)

Question

У меня есть таблица HTML с возможностью поиска, которая извлекает элементы списка SharePoint из нескольких дочерних сайтов, и все в ней почти идеально. Единственная проблема, с которой я сталкиваюсь, заключается в том, что элемент «Программа» продолжает печататься каждый раз, когда функция проходит / циклы, но я хочу, чтобы он печатал заголовок / элемент «Программа» только один раз, а все коррелирующие элементы печатались под одним Заголовок программы. Я приложу ниже снимок экрана с моей таблицей и тем, как она распечатывается, а также с моей функцией, которая считывает информацию и печатает ее в таблице. Мы будем очень благодарны за любые предложения / помощь / совет.

Могу ли я использовать что-нибудь в соответствии со строками оператора if?

Например, иметь строки протокола собрания и MSR для каждого типа программы печать только в рамках одной программы.

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

**Expected Result** 
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program    | To                   |  Date     |   Approved | Notes        | Deliverable  |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 1  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 2  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 12/03/2017| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 3  | example@example.com  | 04/17/2020| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| No         | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+

Here is my code:

    .then(([r1, r2, r3]) => {
  const objItems = r1.concat(r2,r3);
  console.log(objItems);
  var tableContent =
    ' Программа  '+ " Кому  "+"  Дата отправки  "+"  Утверждено  «+»  Примечания  "+"  Срок поставки  "+"  "; для (var я = 0; я "; tableContent + = "" + objItems [i] .Program + ""; tableContent + = ""; tableContent + = ""; tableContent + = " "; tableContent + = "" + objItems [i] .To + ""; tableContent + = "" + objItems [i] .Date + ""; tableContent + = "" + objItems [i] .Approved + ""; tableContent + = "" + objItems [i] .Notes + ""; tableContent + = "" + objItems [i] .Deliverable + ""; tableContent + = ""; } иначе если (objItems.Program == "2") {tableContent + = ""; tableContent + = "" + objItems [i] .Program + ""; tableContent + = ""; tableContent + = ""; tableContent + = " "; tableContent + = "" + objItems [i] .To + ""; tableContent + = "" + objItems [i] .Date + ""; tableContent + = "" + objItems [i] .Approved + ""; tableContent + = "" + objItems [i] .Notes + ""; tableContent + = "" + objItems [i] .Deliverable + ""; tableContent + = ""; } иначе если (objItems.Program == "3") {tableContent + = ""; tableContent + = "" + objItems [i] .Program + ""; tableContent + = ""; tableContent + = ""; tableContent + = " "; tableContent + = "" + objItems [i] .To + ""; tableContent + = "" + objItems [i] .Date + ""; tableContent + = "" + objItems [i] .Approved + ""; tableContent + = "" + objItems [i] .Notes + ""; tableContent + = "" + objItems [i] .Deliverable + ""; tableContent + = ""; }} $ ("# результатов"). append (tableContent); }) .catch ((err) => {alert ("Ошибка:" + err); console.error (err);}); 

}); [1]: https://i.stack.imgur.com/ULOMF.png

Answer 1

var tableData =
[{'program': 'Program 1', 'To': 'example1', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 1', 'To': 'example2', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 2', 'To': 'example3', Date: '8/5', Approved: 'No', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'},
{'program': 'Program 3', 'To': 'example4', Date: '8/5', Approved: 'Yes', Notes: 'Note', Deliverable: 'Deliverable'}]

//Fake loadData(...)
Promise.all(tableData)
.then((r1) => {
  const objItems = r1;
  makeTable(objItems);
})


function makeTable(tableData){
var group = {};
for(var d of tableData){
 if(group[d.program]){
    group[d.program].push(d);
 } else {
  group[d.program] = [d];
 }
}

var tableContent = ''; // I put the table in the html but you can populate it here

for (var prop in group) {
  tableContent += "<tr>";
  tableContent += "<td rowspan=\""+ group[prop].length +"\">" + prop + "</td>";
  tableContent += "<td>" + group[prop][0].To + "</td>";
  tableContent += "<td>" + group[prop][0].Date + "</td>";
  tableContent += "<td>" + group[prop][0].Approved + "</td>";
  tableContent += "<td>" + group[prop][0].Notes + "</td>";
  tableContent += "<td>" + group[prop][0].Deliverable + "</td>";
  tableContent += "</tr>";
  for(var i = 0; i < group[prop].length - 1; i++){
    tableContent += "<tr>";
    tableContent += "<td>" + group[prop][i+1].To + "</td>";
    tableContent += "<td>" + group[prop][i+1].Date + "</td>";
    tableContent += "<td>" + group[prop][i+1].Approved + "</td>";
    tableContent += "<td>" + group[prop][i+1].Notes + "</td>";
    tableContent += "<td>" + group[prop][i+1].Deliverable + "</td>";
    tableContent += "</tr>";
 }
}
$("#deliverablesTable").append(tableContent);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="deliverablesTable" style="width:100%" border="1 px">
<thead>
<tr>
 <td><strong>Program</strong></td>
 <td><strong>To</strong></td>
 <td><strong>Date</strong></td>
 <td><strong>Approved</strong></td>
 <td><strong>Notes</strong></td>
 <td><strong>Deliverable</strong></td>
</tr></thead><tbody>