按 2 个不同的属性对数组进行排序/分组

Question

我有一个基于其“程序”属性的分组/排序数组，这很棒。但是现在我需要根据该分组内的不同属性（可交付）进行排序，这可能吗？如果是这样，我怎样才能做到这一点？

这是我的桌子的照片。

看看它是如何按程序组织的？在程序分组中，我还想根据可交付项目进行排序/分组，因为每个程序中会有两个以上的方法。此外，如果工作量不大，我也希望使这些行可点击（展开/折叠），这样表格在加载后不会有 100 行长。这是我的预期输出：

预期结果

+------------+----------------------+-----------+------------+--------------+---------------------+

| Program    | Deliverable          |  Date     |   Approved | Notes        | To                  |

+------------+----------------------+-----------+------------+--------------+---------------------+

| Program 1  |                                                                                    |

+------------+----------------------+-----------+------------+--------------+---------------------+

|            | Monthly Status Report|                                                             |

+------------+----------------------+-----------+------------+--------------+---------------------+

|            |                      | 05/10/2020| Yes        | Example Notes| [e-mail] |

+------------+----------------------+-----------+------------+--------------+---------------------+

|            |                      | 03/30/2020| No         | Example Notes| [e-mail] |

+------------+----------------------+-----------+------------+--------------+---------------------+

|            | Meeting Minutes      |                                                             |

+------------+----------------------+-----------+------------+--------------+---------------------+

Answer 1

只需对您的结果进行排序。Object.keys(sortedObj).forEach(key => {&nbsp; &nbsp; &nbsp; tableContent += "<tr>";&nbsp; &nbsp; &nbsp; tableContent += "<td>" + key + "</td>";&nbsp; &nbsp; &nbsp; tableContent += "</tr>";&nbsp; &nbsp; &nbsp; sortedObj[key].sort((a,b)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (a.Deliverable > b.Deliverable) return 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (a.Deliverable < b.Deliverable) return -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 0;&nbsp; &nbsp; &nbsp; }).forEach(obj => {&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<tr>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td> </td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td>" + obj.To + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td>" + obj.Date + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td>" + obj.Approved + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td>" + obj.Notes + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<td>" + obj.Deliverable + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "</tr>";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });

Answer 2

这是代码：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 datadelete (item.Deliverable); //remove this line to keep the deliverable in the item dataif(!sortedObj[program]){sortedObj[program] = {};}if(!sortedObj[program][deliverable]){sortedObj[program][deliverable] = [];}sortedObj[program][deliverable].push(item);});&nbsp;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>";});});});&nbsp; &nbsp; &nbsp; $("#deliverables").append(tableContent);&nbsp; &nbsp; &nbsp; $('.datarow').hide();&nbsp; &nbsp; $('.subdatarow').hide();&nbsp;&nbsp; &nbsp; &nbsp; $('#deliverablesTable').on('click', 'tr.breakrow', function(){&nbsp; &nbsp; &nbsp; console.log('hello');&nbsp; &nbsp; &nbsp; &nbsp; $(this).nextUntil('tr.breakrow').slideToggle(200);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $(document).on('click','#deliverablesTable tr.datarow', function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).nextUntil('tr.breakrow, tr.datarow').slideToggle(200);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; })