user3849687 user3849687 - 2 months ago 10
AngularJS Question

Grouping by date but not time in angular

I'm building my first angular app.

I'm am returning some JSON data from an API using a factory service which includes football match fixtures.

I want to group by date but disregard the time. The JSON date string is in the format of "2016-06-10T19:00:00Z"

I've managed to use groupBy on my ng-repeat and this works fine - only problem is - it takes into account the time also so 2 games on the same day at different KO times will not be grouped.

My JSON object is something like this an I assign it to an array in my controller called fixtures.list:

"fixtures":[
{
"_links":{
"self":{
"href":"http://api.football-data.org/v1/fixtures/149855"
},
"soccerseason":{
"href":"http://api.football-data.org/v1/soccerseasons/424"
},
"homeTeam":{
"href":"http://api.football-data.org/v1/teams/773"
},
"awayTeam":{
"href":"http://api.football-data.org/v1/teams/811"
}
},
"date":"2016-06-10T19:00:00Z",
"status":"TIMED",
"matchday":1,
"homeTeamName":"France",
"awayTeamName":"Romania",
"result":{
"goalsHomeTeam":null,
"goalsAwayTeam":null
}
},
...


and my angular template like this:

http://plnkr.co/edit/R4qjDfyKhefDOaHmleJv?p=preview

My controller:

function FixturesController (EurosService) {
var ctrl = this;
ctrl.list = [];
function getFixtures () {
EurosService
.retrieveFixtures()
.then( function (response) {
ctrl.list = response;
});
}
getFixtures();
}

angular
.module('app')
.controller('FixturesController', FixturesController)


Help appreciated on this. Whats the best way to do this? Thanks.

Answer

Related to this answer http://stackoverflow.com/a/30509960/1211299

You can add a mapping function to your groupby filter: | map: toLocaleDate | groupBy: 'date' whereas your mapping function would like this:

$scope.toLocaleDate = function(e) {
    e.date = e.date.toLocaleDateString();
    return e;
};

This function converts your date into a date only string. The timepart will be stripped from your original object.