2

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.