I have a grouped/sorted array based on its "Program" attribute which is great. But now I need to sort by a different attribute (Deliverable) inside of that grouping, is that possible? And if so how can I accomplish that?
Here is a picture of my table.
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| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 03/30/2020| No | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | Meeting Minutes | |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 02/10/2010| Yes | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 03/30/2020| Yes | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| Program 2 | |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | Monthly Status Report| |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 05/10/2020| Yes | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 03/30/2020| No | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | Meeting Minutes | |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 02/10/2010| Yes | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
| | | 03/30/2020| Yes | Example Notes| [email protected] |
+------------+----------------------+-----------+------------+--------------+---------------------+
Here is my code:
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2,r3);
console.log(JSON.stringify(objItems));
console.log(objItems);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr colspan = "5"><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);
});
Object.keys(sortedObj).forEach(key => {
tableContent += "<tr>";
tableContent += "<td>" + key + "</td>";
tableContent += "</tr>";
sortedObj[key].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>";
});
});
$("#deliverables").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
2
Answers
Here is the code:
Just sort the result that you have.