How to get array data by filtering date dynamically in angularjs?

Question

I have to display data based on dropdown selected value. The options of dropdown are last 10 new joinees, all joinees,last three month joinees and date selected base joinee details. I want to write function which filters data based on join date and display this details based on selected dropdown. I am totally get strucked in this one as i am new to angularjs. Any help would appreciate. pls guide me on this issue.

ctrl.getempjoin = function() {
  var reqObj = {
    empid: ctrl.empDetails.empid
  };
  employeeservice.getempjoinDetails(reqObj).then(function() {


      ctrl.empdetail = employeeservice.viewemployeeDetails;
      ctrl.empdetails = ctrl.empdetail.Responsefile;
      for (var i = 0; i < ctrl.empdetails.length; i++) {
        ctrl.empdetails[i].sal = ctrl.empdetails[i].sal.toString();

      }

    }
    PaginationService.initialize(ctrl.empdetails, 10);
  })




 //service file:

  var dropDownemp = [{
    optionId: '1',
    optionName: 'Last 10 new joinees join data'
  }, {
    optionId: '2',
    optionName: 'All employees join date'
  }, {
    optionId: '3',
    optionName: 'Select Date Range'
  }];

this.selectedFrequency = {
  value: ''
};

this.dropdownControl = componentFactory.create({
  type: 'dropdown',
  customValidation: function() {},
  dropdownOptions: dropDownemp,
  empty: {
    value: 'Select One Value'
  },

  value: {
    optionId: '1',
    optionName: 'Last 10 joinee detilas'
  },
  desktop: false,
  onSelect: function() {
    var selectVal = this.getValue().optionId;
    var selectName = this.getValue().optionName;
    that.dateControlFrom.value = '';
    that.dateControlTo.value = '';
    displayDetails(selectVal, selectName);
  }
});



function displayDetails(selectVal, selectName) {

  if (selectVal == "1") {
    that.requestObject = {
      empid: emploeeDetails.empid,
      fromDate: that.finalCurrentMonth,
      toDate: that.dateStartFormat
    }
    that.getEmployeeDetails(that.requestObject, ConfigService.ServiceUrl.getNewEmployeeDetails).then(onSuccess).catch(onError);
  } else if (selectVal == "2") {
    that.requestObject = {
      empid: emploeeDetails.empid,
      fromDate: that.finalFirstDate,
      toDate: that.finalLastDate
    }
    that.getEmployeeDetails(that.requestObject, ConfigService.ServiceUrl.getFlexiSummaryDetails).then(onSuccess).catch(onError);
  } else if (selectVal == "3") {
    openDateRange();
  }

<div ngcontroller="mycontroller as myctrl" ng-repeat="employee in myctrl.empdetails.employees">
  <div>
    name
  </div>

  <div>
    {{employee.name}}
  </div>

  <div>
    city
  </div>

  <div>
    {{employee.city}}
  </div>

  <div>
    joindate
  </div>

  <div>
    {{employee.joindate}}
  </div>


  <div>
    salary
  </div>

  <div>
    {{employee.salary}}
  </div>

json file:

Employees:
{
[
joindate : "23-nov-2016",
name : "abc",
city:"a",
salary:10000
],
}

Answer 1

Okay, you are going to want to use a filter and ng-repeat to do the actual filtering in the view. You essentially have two problems:

1. Convert the joindate attribute from your input JSON into something that you can compare to other dates. I would parse it into a Javascript Date object. Since your date format appears to be dd-MMM-yyyy, there is a snippet on this other StackOverflow question (Parse String dd-MMM-yyyy to Date Object JavaScript without Libraries) that can help you.
2. Build a custom AngularJS filter that does what you want based on the currently selected filtering option in the dropdown. This could look something like the filter defined below:

 

app.filter('myDateFilter', function() {
  // Helper from https://stackoverflow.com/questions/22058822/parse-string-dd-mmm-yyyy-to-date-object-javascript-without-libraries
  var parseDate = function(s) {
    var months = {jan:0,feb:1,mar:2,apr:3,may:4,jun:5,
                  jul:6,aug:7,sep:8,oct:9,nov:10,dec:11};
    var p = s.split('-');
    return new Date(p[2], months[p[1].toLowerCase()], p[0]);
  }

  // Actual filter function
  // input is the original array of joinees
  // dateFilterType is the currently selected date filter from the dropdown
  // sd is the start date selected in the datepicker
  // ed is the end date selected in the datepicker
  return function(input, dateFilterType, sd, ed) {
    switch (dateFilterType) {
      case 1:
        // Create a date that is exactly 10 days ago
        var tendaysago = new Date();
        tendaysago.setDate(tendaysago.getDate() - 10);
        // Filter if joindate > tendaysago
        return input.filter(function(item) {
          return parseDate(item.joindate) > tendaysago;
        });
        return input;
        break;
      case 2:
        // Create a date that is exactly 3 months ago
        var threemonthsago = new Date();
        threemonthsago.setMonth(threemonthsago.getMonth() - 3);
        // Filter if joindate > threemonthsago
        return input.filter(function(item) {
          return parseDate(item.joindate) > threemonthsago;
        });
        break;
      case 3:
        // Using uib-datepicker, sd and ed inputs are already JS Date objects so we can just directly compare the item's parsed date with these inputs
        return input.filter(function(item) {
          var d = parseDate(item.joindate);
          return d > sd && d < ed;
        });
        break;
      default:
        return input;
    }
  }
});

You can then use this filter in your template like so:

<div ng-repeat="joinee in joinees | myDateFilter:selectedDateFilter:sdt:edt">

myDateFilter is the name of the defined filter, and parameters are passed in by separating them with a :.

Here is a simple plunkr that might help you: https://plnkr.co/edit/wfBUSaXOQ89DxdiMQkmm