Сортировка / группировка массива по 2 различным атрибутам

Question

У меня есть сгруппированный / отсортированный массив на основе его атрибута "Program", и это здорово. Но теперь мне нужно отсортировать по другому атрибуту (Доставлен) внутри этой группы, возможно ли это? И если да, то как я могу sh это сделать?

Вот изображение моего стола.

See how it is organized by Program? Inside of the Program grouping, I want to also sort/group based on the Deliverable item, since there will be way more than two within each Program. Also, if it isn't too much work I would also love to make those rows clickable (expand/collapse) so the table isn't 100 rows long once it is loaded. Here is my expected output:

Expected Result

+------------+----------------------+-----------+------------+--------------+---------------------+
| Program    | Deliverable          |  Date     |   Approved | Notes        | To                  |
+------------+----------------------+-----------+------------+--------------+---------------------+
| Program 1  |                                                                                    |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            | Monthly Status Report|                                                             |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 05/10/2020| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 03/30/2020| No         | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            | Meeting Minutes      |                                                             |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 02/10/2010| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 03/30/2020| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
| Program 2  |                                                                                    |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            | Monthly Status Report|                                                             |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 05/10/2020| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 03/30/2020| No         | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            | Meeting Minutes      |                                                             |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 02/10/2010| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+
|            |                      | 03/30/2020| Yes        | Example Notes| example@example.com |
+------------+----------------------+-----------+------------+--------------+---------------------+

Here is my code:

.then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(JSON.stringify(objItems));
      console.log(objItems);
      var tableContent =
        '  Программа  '+ " Кому " + " Дата отправки " + " Утверждено  «+»  Примечания  «+»  Срок поставки  «+»   "; var sortedObj = {} objItems.forEach (item => {var program = item.Program; delete (item.Program); // удаляем эту строку, чтобы программа оставалась в данных элемента if (! sortedObj [program]) {sortedObj [программа] = [];} sortedObj [программа] .pu sh (элемент);}); Object.keys (sortedObj) .forEach (key => {tableContent + = ""; tableContent + = "" + key + ""; tableContent + = ""; sortedObj [ ключ] .forEach (obj => {tableContent + = ""; tableContent + = " "; tableContent + = "" + obj.To + ""; tableContent + = "" + obj.Date + ""; tableContent + = "" + obj.Approved + ""; tableContent + = "" + obj.Notes + ""; tableContent + = "" + obj.Deliverable + ""; tableContent + = "";});}); $ ("# результатов"). append (tableContent); }) .catch ((err) => {alert ("Ошибка:" + err); console.error (err);}); }); 

Answer 1

Вот код:

var sortedObj = {}
objItems.forEach(item => {
var program = item.Program;
var deliverable = item.Deliverable;
delete (item.Program); //remove this line to keep the program in the item data
delete (item.Deliverable); //remove this line to keep the deliverable in the item data
if(!sortedObj[program]){
sortedObj[program] = {};
}
if(!sortedObj[program][deliverable]){
sortedObj[program][deliverable] = [];
}
sortedObj[program][deliverable].push(item);
});
 
Object.keys(sortedObj).forEach((program, index) => {
tableContent += "<tr class='breakrow'>";
tableContent += "<td>" + program + "</td>";
tableContent += "</tr>";
Object.keys(sortedObj[program]).forEach((deliverable, index) => {
tableContent += "<tr class='datarow'>";
tableContent += "<td> </td>";
tableContent += "<td>" + deliverable + "</td>";
tableContent += "</tr>";
sortedObj[program][deliverable].forEach(obj => {
tableContent += "<tr class='subdatarow'>";
tableContent += "<td> </td>";
tableContent += "<td> </td>";
tableContent += "<td>" + obj.To + "</td>";
tableContent += "<td>" + obj.Date + "</td>";
tableContent += "<td>" + obj.Approved + "</td>";
tableContent += "<td>" + obj.Notes + "</td>";
tableContent += "</tr>";
});
});
});
      $("#deliverables").append(tableContent);
      $('.datarow').hide();
    $('.subdatarow').hide();
 
      $('#deliverablesTable').on('click', 'tr.breakrow', function(){
      console.log('hello');
        $(this).nextUntil('tr.breakrow').slideToggle(200);
      });
      $(document).on('click','#deliverablesTable tr.datarow', function(){
        $(this).nextUntil('tr.breakrow, tr.datarow').slideToggle(200);
      });
      })

Answer 2

Просто отсортируйте результат, который у вас есть.

Object.keys(sortedObj).forEach(key => {
      tableContent += "<tr>";
      tableContent += "<td>" + key + "</td>";
      tableContent += "</tr>";
      sortedObj[key].sort((a,b)=>{
          if (a.Deliverable > b.Deliverable) return 1;
          if (a.Deliverable < b.Deliverable) return -1;
          return 0;
      }).forEach(obj => {
        tableContent += "<tr>";
        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>";
      });
    });