Javascript object array grouping and summing

Question

I have been tasked with creating a time sheet table that will display the hours worked on by each client per day. The table should look something like the snippet below:

table, td, th {
            border: 1px solid black;
        }

<div>
  <table id="testTable" class="table">
    <tr>
      <th>Client name</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>client1</td>
      <td>0</td>
      <td>5</td>
      <td>3</td>
      <td>2</td>
      <td>3</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>client2</td>
      <td>4</td>
      <td>1</td>
      <td>4</td>
      <td>2</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>
</div>

The issue I am having is that after querying the timesheet items needed to populate the table, i am unsure how to group each item by the client name and day of the week. The array retrieved would look similar to this:

timesheetItems = [
  timesheetItem = {
      clientName: client1,
      hoursWorked: 2,
      day: Monday
    },
  timesheetItem = {
      clientName: client1,
      hoursWorked: 3,
      day: Monday
    },
  timesheetItem = {
      clientName: client1,
      hoursWorked: 4,
      day: Wednesday
    },
  timesheetItem = {
      clientName: client2,
      hoursWorked: 4,
      day: Monday
    }
  
  ];

the grouped array should group all the timesheet items into one object per client and have keys for each day of the week that contains the sum of hours worked for that day. The final array should look something like this:

groupedArray = {
  Client1 = {
    Mon: 5,
    tues: 3,
    ...
    sun: 0
  },
  client2 = {
    mon:2,
    ...
  },
  client3 = {
  ...
  },
  ...
}

So if anyone could suggest how to go about grouping the timesheet items array so that the outcome will look like the snippet above, so i can easily loop from the grouped array to populate the table, it would be very helpful. Thanks.

Array#reduce

Xotic750
– Xotic750

2016-09-14 15:39:31 +00:00
Commented Sep 14, 2016 at 15:39 — Xotic750
– Xotic750, Commented Sep 14, 2016 at 15:39

MatthieuLemoine · Accepted Answer · 2016-09-14 15:39:38Z

1

To aggregate an array you can use reduce :

const groupedArray = timesheetItems.reduce((prev, curr) => {
    if (!prev[curr.clientName]) {
        prev[curr.clientName] = {};
    }
    if (!prev[curr.clientName][curr.day]) {
        prev[curr.clientName][curr.day] = 0
    }
    prev[curr.clientName][curr.day] += curr.hoursWorked;
    return prev; 
}, {});

answered Sep 14, 2016 at 15:39

MatthieuLemoine

7066 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nina Scholz · Accepted Answer · 2016-09-14 16:11:54Z

0

You could use Array#forEach and check for existent objects. If not exist assign a new oject or value.

var timesheetItems = [{ clientName: 'client1', hoursWorked: 2, day: 'Monday' }, { clientName: 'client1', hoursWorked: 3, day: 'Monday' }, { clientName: 'client1', hoursWorked: 4, day: 'Wednesday' }, { clientName: 'client2', hoursWorked: 4, day: 'Monday' }],
    grouped = {};

timesheetItems.forEach(a => {
    grouped[a.clientName] = grouped[a.clientName] || {};
    grouped[a.clientName][a.day] = (grouped[a.clientName][a.day] || 0) + a.hoursWorked;
});

console.log(grouped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Sep 14, 2016 at 16:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Redu · Accepted Answer · 2016-09-14 17:58:44Z

We might utilize a tableMaker() function to generate a table from an array of objects where each object designate a table row, the properties of the objects designate the headers and the values are the data cells. But first we have to convert our data into a form that the tableMaker() function can understand. Such as

[ { 'Client Name': 'client1',
    Monday: 5,
    Tuesday: 0,
    Wednesday: 4,
    Thursday: 0,
    Friday: 0 },
  { 'Client Name': 'client2',
    Monday: 4,
    Tuesday: 0,
    Wednesday: 0,
    Thursday: 0,
    Friday: 0 } ]

So here is the code for the table.

function tableMaker(o,h=true){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

function giveMeNewClient(o){
  var templateObject = {
    	                "Client Name": "",
    	                     "Monday": 0,
    	                    "Tuesday": 0,
    	                  "Wednesday": 0,
    	                   "Thursday": 0,
    	                     "Friday": 0
                       };
  return Object.assign(templateObject,o);
}
var timesheetItems = [{
                        clientName: "client1",
                       hoursWorked: 2,
                               day: "Monday"
                      },
                      {
                      	clientName: "client1",
                       hoursWorked: 3,
                               day: "Monday"
                      },
                      {
                      	clientName: "client1",
                       hoursWorked: 4,
                               day: "Wednesday"
                      },
                      {
                      	clientName: "client2",
                       hoursWorked: 4,
                               day: "Monday"
                      }
                     ],

         tableData = timesheetItems.reduce((res,c) => { var client = res.find(o => o["Client Name"] === c.clientName);
                                                        client ? client[c.day]+= c.hoursWorked
                                                               : res.push(giveMeNewClient({"Client Name": c.clientName, [c.day]: c.hoursWorked}));
                                                        return res;
                                                      },[]),
         tableHTML = tableMaker(tableData);
myTable.innerHTML = tableHTML;

<div id="myTable"></div>

Collectives™ on Stack Overflow

Javascript object array grouping and summing

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related