Grouping by date but not time in angular

Question

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.

Can you share the code on how you have used `groupBy` on ng-repeat? — Saba, May 23 '16 at 09:12

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

Related to this answer https://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.

edited May 23 '17 at 12:03

Community

1
1

answered May 23 '16 at 12:11

Danscho

466
5
20

Thanks that's exactly what I needed. I tried creating a custom filter but this makes it much easier! Wasn't even aware of map – user3849687 May 23 '16 at 13:47

Grouping by date but not time in angular

1 Answers1