why filter is not working in angular js?

Question

I am trying to filter my list using input field and date field on button click .When I filled this field "to station "DEL" and "from station" "PNQ" "flight_date" "10-01-2017" .it should should one result .current it show no result .

here is my code https://plnkr.co/edit/k4FBxqufETslgYxm4zEx?p=preview

$scope.searchClick =function(){
  if($scope.fromStation!='' && $scope.toStation!='' && $scope.departDate !=''){
    $scope.names = $scope.names.filter(function(item){
      return item.to_station === $scope.toStation 
      && item.from_station === $scope.fromStation
      &&  item.flight_date === $scope.departDate
    })
  }

expected output

{
    "to_station_name": "Delhi",
    "to_station": "DEL",
    "from_station": "PNQ",
    "from_station_name": "Pune",
    "depart_time": "12:00AM",
    "arrival_time": "4:00PM",
    "PNR": "AL_201",
    "flight_date": "10-01-2017",
    "fare": "900"
  },

Answer 1

You can change your input type from date to text to get it working.

EDIT : since you want to keep date input, try this :

//Initialize departDate as a js date object
$scope.departDate = new Date();
//Function to convert js date object to string 
function formattedDate(d = new Date) {
  let month = String(d.getMonth() + 1);
  let day = String(d.getDate());
  const year = String(d.getFullYear());

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return `${day}-${month}-${year}`;
}
$scope.searchClick =function(){
  if($scope.fromStation!='' && $scope.toStation!='' && $scope.departDate !=''){
    console.log($scope.departDate)
    console.log(formattedDate($scope.departDate))
    //Use formattedDate function to compare your departDate with your model data
    $scope.names = $scope.names.filter(function(item){
      console.log(item.flight_date)
      return item.to_station === $scope.toStation 
      && item.from_station === $scope.fromStation
      &&  item.flight_date === formattedDate($scope.departDate)
    })
  }
}
});

Answer 2

Your comparisons of the dates aren't equal. You need to convert both strings into a valid Date object before you can compare them.

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { var defaultNames = [{ "to_station_name": "Delhi", "to_station": "DEL", "from_station": "PNQ", "from_station_name": "Pune", "depart_time": "12:00AM", "arrival_time": "4:00PM", "PNR": "AL_201", "flight_date": "10-01-2017", "fare": "900" }, { "to_station_name": "Delhi", "to_station": "DEL", "from_station": "PNQ", "from_station_name": "Pune", "depart_time": "8:00AM", "arrival_time": "11:00AM", "PNR": "AL_203", "flight_date": "06-01-2017", "fare": "800" }, { "to_station_name": "Delhi", "to_station": "DEL", "from_station": "PNQ", "from_station_name": "Pune", "depart_time": "11:00AM", "arrival_time": "2:00PM", "PNR": "AL_204", "flight_date": "09-01-2017", "fare": "800" }, { "to_station_name": "Pune", "to_station": "PNQ", "from_station": "DEL", "from_station_name": "Delhi", "depart_time": "10:00AM", "arrival_time": "1:00PM", "PNR": "AL_202", "flight_date": "11-01-2017", "fare": "900" }, { "to_station_name": "Pune", "to_station": "PNQ", "from_station": "DEL", "from_station_name": "Delhi", "depart_time": "8:00AM", "arrival_time": "10:00AM", "PNR": "AL_208", "flight_date": "14-01-2017", "fare": "1000" }, { "to_station_name": "Pune", "to_station": "PNQ", "from_station": "DEL", "from_station_name": "Delhi", "depart_time": "10:00AM", "arrival_time": "2:00PM", "PNR": "AL_211", "flight_date": "13-01-2017", "fare": "1000" } ]; function getNames() { if ($scope.fromStation != '' && $scope.toStation != '' && $scope.departDate != '') { let departDate = new Date($scope.departDate); departDate.setHours(0, 0, 0, 0); $scope.names = defaultNames.filter(function(item) { let dateArr = item.flight_date.split("-"); dateArr = dateArr.reverse(); let dateFormat = dateArr.join("-"); let flightDate = new Date(dateFormat); flightDate.setHours(0, 0, 0, 0); return item.to_station === $scope.toStation && item.from_station === $scope.fromStation && departDate.getTime() == flightDate.getTime(); }) } else { $scope.names = defaultNames; } } $scope.fromStation = ''; $scope.toStation = ''; $scope.departDate = ''; $scope.names = []; getNames(); $scope.searchClick = function() { getNames(); } }); 

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> From:: <input type="text" ng-model="fromStation" placeholder="From station"> TO:: <input type="text" ng-model="toStation" placeholder="To station"> <br></br> DEPART Date:: <input type="date" ng-model="departDate" placeholder="select date"> <button ng-click="searchClick()">search</button> <ul> <li ng-repeat="x in names"> FROM: {{ x.from_station_name }} ------ TO:{{ x.to_station_name }} </li> </ul> </body> </html>