javascript - AngularJS list not showing - issue with custom filter? -


i trying troubleshoot why "upcoming events" list not show? live demo here (code shown below)

here's angularjs view:

<body ng-app="listapp">  <div class="container" ng-controller="eventcontroller">   <h3>upcoming events:</h3>      <ul ng-repeat="event in events | upcomingevents | limitto: 2">         <li>{{ event.title }}</li>         <li>{{ event.start }}</li>     </ul>  </div> 

here's controller , custom filter:

<script type="text/javascript" src="angularjs/angular.min.js"></script> <script>  var app = angular.module('listapp', []);  app.controller('eventcontroller', function($scope, $http){     $http.get('events.json').success(function(data) {              $scope.events = data;     }) });      app.filter('upcomingevents', function () {      return function (input) {      var upcomingevents = [];      upcomingevents = input.filter(function (data) {         var currentdate = new date();          if ((data.start - currentdate) >= 0) {             return true;         } else {             return false;         }     });      upcomingevents.sort(function (a, b) {         return a.start - b.start;     });      return upcomingevents;   }; });  </script> 

here's events.json feed:

[   {     "title": "all day event",     "start": "2015-07-13",     "allday": true   },   {     "title": "long event",     "start": "2015-07-05",     "end": "2015-07-13"   },   {     "title": "repeating event",     "start": "2015-07-15",     "allday": false   },   {       "title": "first time",       "start": "2015-07-31"   } ] 

i getting error in chrome's console, not sure means.

console error:

typeerror: cannot read property 'filter' of undefined @ http://ogmda.com/sandbox/listings.html:44:31 @ fn (eval @ <anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:212:83), <anonymous>:2:191) @ object.<anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:117:376) @ n.$get.n.$digest (http://ogmda.com/sandbox/angularjs/angular.min.js:132:124) @ n.$get.n.$apply (http://ogmda.com/sandbox/angularjs/angular.min.js:135:269) @ http://ogmda.com/sandbox/angularjs/angular.min.js:19:437 @ object.e [as invoke] (http://ogmda.com/sandbox/angularjs/angular.min.js:39:156) @ d (http://ogmda.com/sandbox/angularjs/angular.min.js:19:358) @ ac (http://ogmda.com/sandbox/angularjs/angular.min.js:20:151) @ zd (http://ogmda.com/sandbox/angularjs/angular.min.js:18:464) 

anyone have advice on how can proceed fix? thanks.

change

 if ((data.start - currentdate) >= 0)  

to:

if ((new date(data.start) - currentdate) >= 0)  

the data.start string representation of date. convert date 1st

fixed demo in fiddle


typeerror: cannot read property 'filter' of undefined

seems in code input value = undefined because on start don't have $scope.events , input.filter(...) fails.

so add in filter:

var upcomingevents = [];  if(!input){  return upcomingevents; }  

or initiate $scope.events = [] in controller (best bet)


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -