Group json data from server by date

Question

Am retrieving data from my server in the format below

[{id: 1, title:"hello world", date:"2014-10-11",location: "The Room"},{id: 1, title:"hello world2", date:"2014-10-11",location: "The Room"}, {id: 1, title:"hello world3", date:"2014-10-11",location: "The Room"}]

Am try to display the data in my view like this

2014-10-11
hello world
hello world2
hello world3

I tried using the example here How can I group data with an Angular filter? in the answer by @Plantface, but instead the data is displayed in my view like this

2014-10-11
hello world
hello world2
hello world3
2014-10-11
hello world
hello world2
hello world3
2014-10-11
hello world
hello world2
hello world3

The date seems to be repeating when is should render once. Am i missing something?

There is probably something wrong with your loop in ng-repeat. Can you show your code? — Caspar Harmer, Sep 22 '14 at 00:46
This [test](http://plnkr.co/edit/SnNgt9IqQjvfjbjmeife?p=preview) works just fine using the data you posted. So the problem must be somewhere in your code. — Bogdan, Sep 22 '14 at 00:52
@CaspNZ thanks for the hints, there was a problem in my loop — MrFoh, Sep 22 '14 at 01:03

score 0 · Accepted Answer · answered Sep 22 '14 at 01:07

The View

<script type="text/ng-template" id="schedule.html">
            <ion-view title="Schedule">
                <ion-content>
                    <ion-list ng-repeat="date in datesToFilter() | filter:filterDates">
                        <div class="item item-divider">{{ date.date }}</div>
                        <ion-item href="#/tab/schedule/{{event.id}}" class="event item-icon-right" ng-repeat="event in events | filter:{date: date.date}">
                            <span class="time">{{ event.startstamp }}</span>
                            <span class="title">{{ event.title }}</span>
                            <i class="icon ion-chevron-right"></i>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-view>
            </script>

The Controller

function($rootScope, $scope, $q, API, $data, $window) {

            $scope.events = $data.events;

            var indexedDates = [];

            $scope.datesToFilter = function() {
                indexedDates = [];
                return $scope.events;
            }

            $scope.filterDates = function(event) {
                var isNew = indexedDates.indexOf(event.date) == -1;
                if (isNew) {
                    indexedDates.push(event.date);
                }
                return isNew;
            }

Group json data from server by date

1 Answers1