Группирование элементов по строкам в таблице HTML на основе определенного атрибута заголовка

Question

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

Фактический результат: Кому + ""; 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);}); });

Вот массив объектов, возвращенный в objItems

{"Notes": "Example Notes", "Approved": "Yes", "Program": "Prorgam 1", "Date": "12/23/2018", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 1", "Date": "03/30/2020", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/23/2018", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/3/2017", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "No", "Program": "Program 3", "Date": "4/17/2020", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 3", "Date": "12/23/2018", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Meeting Minutes"},

Answer 1

Сортировать массив / объект перед просмотром l oop.

 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);
        });
    });