skip to Main Content

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.
Example Output

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


  1. Chosen as BEST ANSWER

    Here is the code:

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

  2. Just sort the result that you have.

    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>";
          });
        });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search