angularJS ng-repeat with filter for date greater than where date in array

Question

I have looked a lot of places and cant seem to find what I am looking for. It is probably simple but I am newer to angular and cant seem to figure it out.

The ng-repeat works fine as it is, but I want to filter out certain values.

I have a page with ng-repeat through data (see data object below) and I want to only include ones where current date > item value in array (date).

     vm.newsItems= [
       {
           ID: '1',
           date: '5/12/2016',
           newsTitle: 'This is news story header 1',
           newsText: 'This is news Story Text 1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
       },
       {
           ID: '2',
           date: '5/30/2016',
           newsTitle: 'This is news story header 2',
           newsText: 'This is news Story Text 2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
       }

code on page:

    <div class="box effect8" ng-repeat="newsItem in vm.newsItems">
                <h3>{{newsItem.newsTitle}}</h3>
                {{newsItem.newsText}}
            </div>

This can be done using date filter. but date parameter from your JSON object must be of type date of javascript. — Yogesh
– Yogesh, Commented May 27, 2016 at 13:26
@Yogesh The date filter is for formatting a Date display format, not for filtering out items in an array — Robin-Hoodie
– Robin-Hoodie, Commented May 27, 2016 at 13:31
Oops, Indeed you are correct @NexusDuck. Thanks for pointing out. — Yogesh
– Yogesh, Commented May 27, 2016 at 13:32

Robin-Hoodie · Accepted Answer · 2016-05-27 13:31:51Z

3

Try adding a predicate with the filter $filter for filtering out the items:

newsItem in vm.newsItems | filter: getItemsFromThePast()

vm.getItemsFromThePast =  function(item) {
  var today = new Date();
  return item.date < today;
}

I'm assuming 2 things here:

With current date you mean new Date()
The property date of your objects are actual Date Objects, if they're date-formatted Strings you'll have to convert them to Date Objects first

edited May 27, 2016 at 13:31

answered May 27, 2016 at 13:24

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brad Over a year ago

#NexusDuck Yes I meant new Date() I updated my code (and added function to convert date) but the filter function is not being called. I added an alert in there and it is not fireing so it is not getting called. I included as you indicated but for some reason it is not hitting it.

Brad Over a year ago

It is still working meaning all the items in the object are being displayed, so that is still working just the filtering piece is never being called

Robin-Hoodie Over a year ago

Can you provide a plunkr /fiddle?

Brad Over a year ago

I am using single page app and have routing, I dont think so but could that be interferring? I dont have anything with the same names anywhere.

Chirag · Accepted Answer · 2016-05-27 13:46:05Z

0

Check Codepen. This will work for you. I have converted the date string to Object and used it with filter

var myApp = angular.module('myApp', []);

 myApp.controller('MyController', function ($scope) {

 $scope.newsItems= [
   {
       ID: '1',
       date: '5/12/2016',
       newsTitle: 'This is news story header 1',
       newsText: 'Some text.'
   },
   {
       ID: '2',
       date: '5/30/2016',
       newsTitle: 'This is news story header 2',
       newsText: 'Some text.'
   }
];

 angular.forEach($scope.newsItems, function(value,key) {
  value.date = new Date(value.date);
 });

 $scope.filterDate =  function(newsItem) {
  var today = new Date();   
  return newsItem.date < today;
 }

});

answered May 27, 2016 at 13:46

Chirag

5776 silver badges20 bronze badges

Collectives™ on Stack Overflow

angularJS ng-repeat with filter for date greater than where date in array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related