Ng-repeat JSON filter

ionic-v1
1

Hi,

The following code won’t work, am I missing something?

in the controller

$scope.selectedDate = new Date(); //this displays the current date

in the html

<ion-item class="item item-avatar" ng-repeat="e in events | filter:{'startdate':selectedDate}" href="#/app/detail/{{e.id}}">
   <img class="imgavatarbig" src="{{e.picture}}">
   <h3>{{e.firstname}} {{e.lastname}}</h3>	
   <p class="requestp">{{e.reason}}</p>
   <p class="requestp">{{e.notes}}</p>
   <span class="right request">
      <h4>{{e.startdate}}</h4>
   </span>			
</ion-item>

ALL the events are loaded… Not only the one(s) with the same date as the ‘selectedDate’. That what my intention is…

Btw: both have the same new Date() notation.

$http.get('http://url/to/requests.php').success(function(data) {
        for(var i = 0; i < data.length; i++)
        {
            $scope.events[i] = {id:data[i].id, picture:data[i].picture, firstname:data[i].firstname, lastname:data[i].lastname, id:data[i].id, title: data[i].reason, reason: data[i].reason, notes: data[i].notes, startdate: new Date(data[i].startdate), enddate: new Date(data[i].enddate), allDay: true};
        }
    });

Thanks in advance

2

Okay, with some research:

HTML ng-repeat

<ion-item class="item item-avatar" ng-repeat="e in events | filter:{start:selectedDate}" ... />...

Controller

$scope.selectedDate = "2014-12-02";
    
$scope.events = []; 
$http.get('http://url/to/requests.php').success(function(data) {
        for(var i = 0; i < data.length; i++)
        {
            $scope.events[i] = {id:data[i].id, picture:data[i].picture, firstname:data[i].firstname, lastname:data[i].lastname, id:data[i].id, reason: data[i].reason, notes: data[i].notes, start: data[i].startdate, end: data[i].enddate, status: data[i].status, allDay: true};
        }
    });

THE CODE ABOVE WORKS, but when I change the code above to the following, it doesn’t work anymore:

ng-repeat the same

Controller

$scope.selectedDate = new Date("2014-12-02");

$scope.events = []; 
$http.get('http://url/to/requests.php').success(function(data) {
    for(var i = 0; i < data.length; i++)
    {
        $scope.events[i] = {id:data[i].id, picture:data[i].picture, firstname:data[i].firstname, lastname:data[i].lastname, id:data[i].id, reason: data[i].reason, notes: data[i].notes, start: new Date(data[i].startdate), end: new Date(data[i].enddate), status: data[i].status, allDay: true};
    }
});

Can someone please explain how to compare the two dates?

Thanks.

3

Can you put this in a codepen with some sample data from your http request so we can see what the data looks like? Or at least tell us what format the date is being returned in from the http call.

4

Hi, thanks for your reply:

Data output from the http request:

[
    {
        "id": "142",
        "firstname": "John",
        "lastname": "Doe",
        "allowance": "80",
        "employeeid": "2",
        "date": "2014-12-02 10:51:00",
        "picture": "https://.......",
        "startdate": "2014-12-02",
        "enddate": "2014-12-02",
        "type": "Holiday",
        "reason": "test",
        "notes": "test",
        "role": "Software Engineer",
        "comment": "test",
        "hours": "8",
        "status": "Approved"
    },
    {
        "id": "143",
        "firstname": "Jane",
        "lastname": "Doe",
        "allowance": "80",
        "employeeid": "2",
        "date": "2014-12-05 15:28:00",
        "picture": "https://....",
        "startdate": "2014-12-13",
        "enddate": "2014-12-17",
        "type": "Time-off",
        "reason": "test",
        "notes": "test",
        "role": "Software Engineering",
        "comment": "test",
        "hours": "24",
        "status": "Approved"
    }

]

console.log($scope.events) (with the new Date() around the start- and enddate):

Without the new Date() around start- and enddate it is just “2014-12-02”.

Thanks in advance!

Jan

5

Sorry for the late response, I’ve been a little busy at work.

I made a codepen with your example with a working way to filter the date. There’s a few things going on here - I split the startdate string up into pieces to create the date object because it was creating the date with the wrong day in that format.

Then, I filter both of them using the angular date filter so they are in the same format. You can erase the input field at the top to remove the filter and type in it to add the filter back. Hope this helps!

Edit: Added a formatted date to the second item so you could see the filter working better.

6

Works great thanks!

Sorry for the late response, had some other tasks with high priority. I have another question:
I would like to show “No events for this day” if there aren’t any events which corresponds to the selectedDate.

For other pages in my app I use:

    <ion-item class="animate-repeat" ng-if="events.length == 0">
	      	No requests for today
    </ion-item>

But now, the ‘events’ variable isn’t empty… But when filtering with ‘start:selectedDate’ it is, how to check on this?

Thanks in advance.

Jan

7

I would assign the ng-repeat to a variable like filtered for example:

<ion-item class="item item-avatar" ng-repeat="e in filtered = (events | filter:{startdate:selectedDate})" href="#/app/detail/{{e.id}}">

Then reference that variable

<ion-item ng-if="filtered.length == 0">
    No Events Found  
</ion-item>
8

Works great.

One more…

I use this piece of code also in a different case. The variable $scope.checkCal contains the startdate of the selected request. (in the request details page):

$scope.checkCal = $filter('date')(new Date($scope.request.startdate));

This code is used to display the requests with the same startdate as the request that is selected. This all works well, but because the selected request also has this date, the selected request is also displayed.

So, I would like to display ALL OTHER requests with the same date.

The code I use:

<div class="item item-divider">
         Other events during this period
</div>
<ion-item class="item item-avatar blueborder" ng-repeat="e in filtered = (events | filter:{start:checkCal})">
        <img class="usereventsimg" ng-src="{{e.picture}}">
        <h3 class="marginleft">{{e.firstname}} {{e.lastname}}</h3>         
	<p class="marginleft">{{e.status}}</p>
</ion-item>
<ion-item class="blueborder" ng-if="filtered.length == 0">
        No requests found  
</ion-item>
9

You can add an ng-if to the ion-item so that it won’t show the item if it is the selected request. I’m not sure of the event object but use the unique identifier:

<ion-item ng-if="request.id != e.id" class="item item-avatar blueborder" ng-repeat="e in filtered = (events | filter:{start:checkCal})">
    <img class="usereventsimg" ng-src="{{e.picture}}">
    <h3 class="marginleft">{{e.firstname}} {{e.lastname}}</h3>         
<p class="marginleft">{{e.status}}</p>
</ion-item>