Grouping SharePoint REST API results

Question

I am building a customized events feed via REST query. I have a feed of all events in the calendar, filtered on date range and sorted, but I'd like to take it a step further and group the results by the day of the week. In my calendar list I have a DayOfWeek property that I am able to output via a groupBy function found on another thread:

function getListItems(url, listname, query, complete, failure) {
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data.d.results); 
        },
        error: function (data) {
            failure(data);
        }
    });
}
function groupBy(items,propertyName)
{
    var result = [];
    $.each(items, function(index, item) {
       if ($.inArray(item[propertyName], result)==-1) {
          result.push(item[propertyName]);
       }
    });
    return result;
}

getListItems('https://MYSP.sharepoint.com','Events','?select=Title,DayOfWeek',
    function(items){    
       var daysOfWeek = groupBy(items,'DayOfWeek');
       console.log(daysOfWeek);
    },
    function(error){
       console.log(JSON.stringify(error));
    }
);

I am also able to populate a full events feed with the code below. What I am not sure how to accomplish is to now take the full results from my REST query and group the results by the daysOfWeek.

var a = new Date();
a = a.setDate(a.getDate() + 5);
var d = new Date(a);
var n = d.toISOString();
    $.ajax({
url: "/_api/web/lists/getbytitle('Events')/items?$select=Title,EventDate,Location,CleanDate,DayOfWeek&$top=10&$orderby=EventDate&$filter=EventDate le '" + n + "' and EventDate ge '"+new Date().toISOString()+"'",
type: "GET",
headers: {"Accept": "application/json;odata=verbose"},
cache:false,                
success: function(data){
console.log(data);
var items = [];
$(data.d.results).each(function(){
items.push('<ul id="' + 'listUL' + '">' + 
'<li id="' + 'listLI' + '">' + '<h1 class="dayHeader">' + this.DayOfWeek + this.EventDate + '</h1>' + '<p>' +
this.Title + this.EventDate + this.Location + '</p>' +
'</li>' + 
'</ul>');
});
items.push("</div>");
$("#listResult").html(items.join(''))}
}); 

How could I combine these two approaches to achieve an events feed where items are grouped under the Day headings? Any tips would be greatly appreciated as I'm new to using REST.

Answer 1

I found this code to group JSON data by any Key. Use it in your code to group the results by DayOfWeek.

getListItems('MyMeetings','?select=Title,DayOfWeek',
    function(items){
        var daysOfWeek = groupBy(items, function(item){
            return [item.DayOfWeek];
        });
        console.log(daysOfWeek);
    },
    function(error){
       console.log(JSON.stringify(error));
    }
);

function groupBy( array , f )
{
  var groups = {};
  array.forEach( function( o )
  {
    var group = JSON.stringify( f(o) );
    groups[group] = groups[group] || [];
    groups[group].push( o );  
  });
  return Object.keys(groups).map( function( group )
  {
    return groups[group]; 
  })
}