0

Hi please see my plunkr below

https://plnkr.co/edit/8cJZsb?p=preview

I have $scope.data which looks like this 

 $scope.data = [  
    {  
      "projectedStart":"2017-01-20T00:00:00"      
   },
   {  
      "projectedStart":"2017-02-09T00:00:00"      
   }
];

and $scope.possibleDates that look like this

   $scope.possibleDates = [{  
      "projectedStartDate":"2017-01-25T00:00:00",
      "dateName":"January - Week 4 (20/10)"
   },
   {  
      "projectedStartDate":"2017-02-01T00:00:00",
      "dateName":"February (6/10)"
   },
   {  
      "projectedStartDate":"2017-03-01T00:00:00",
      "dateName":"March (0/2)"
   },
   {  
      "projectedStartDate":"2017-04-05T00:00:00",
      "dateName":"April (2/5)"
   }]

On the front end dropdown list, I want to be able to display the possibleDates that match closest to the 'projectedStart' date in $scope.data.

I am thinking of doing an angular foreach and looping through each projectedStart date in $scope.data and somehow compare it with each of the dates in $scope.possibleDates and updating $scope.Data's projectedStart with the closest match? Failing miserably so far.

Would greatly appreciate it if someone could point me in the right direction

aliaz
  • 787
  • 3
  • 12
  • 28

4 Answers4

0

Look's like you need to look into moment.js. It's a spectacular library for date parsing, formatting, and comparison.

Aaron Pool
  • 479
  • 2
  • 6
0

You could put a watcher on possibleDates, and when they change you compute the list that you are after.

The list can be easily written with tools like moment and underscore.

const projectedDate = moment($scope.data[0].projectedStartDate);
const sortedPossibleDates = _.chain($scope.possibleDates)
   .each((possibleDate) => {
     possibleDate.diff = projectedDate.difference('seconds');
   });
   .sortBy('diff')
   .value()

And voila, the sortedPossibleDates[0] is your best answer

Belfordz
  • 630
  • 6
  • 13
0

A basic sort function should be able to order the possible dates by how close they are to the chosen start date. Just use new Date(ISOString) to get the numerical timestamps.

From: https://stackoverflow.com/a/11796365/6452040

Community
  • 1
  • 1
estacks
  • 104
  • 4
0

If you put a function in script.js like this, which finds the closest date (before or after):

$scope.closestStartDate = function(startDate) {
    var smallestDifferenceInDates = 1000000000000;//impossibly large value
    var closestDateName = 'tmp';
    var date = new Date(startDate);

   for (var i = 0; i < Object.keys($scope.possibleDates).length; i++) {
      var projectedDate = new Date($scope.possibleDates[i].projectedStartDate);
      if (Math.abs(date.getTime() - projectedDate.getTime()) < smallestDifferenceInDates) {
        smallestDifferenceInDates = Math.abs(date.getTime() - projectedDate.getTime());
      closestDateName = $scope.possibleDates[i].dateName;
    }
  }
  return closestDateName;
}

Then change your template code to this: 

<tr ng-repeat="d in data">
    <td>
        {{ closestStartDate(d.projectedStart) }}
    </td>
</tr>

You'll get the closest date from $scope.possibleDates (Math.abs() gets the distance between the two, if you want dates after you can leave that off).

Katherine Ahern
  • 129
  • 5