Convert all dates in an array to date format

Question

I'm returning an array containing dates (and other things) from an API, then looping through the array on the front end to convert them into dates

The backend uses Node.Js and queries a mySql database with the mySql module:

pool.getConnection(function(err, conn) {
  conn.query('SELECT * FROM myData’, function(err, result) {
    if (result) {
      res.json(result);
    }
    conn.release();
  });
});

An Angular.js front end accesses the Express API.

var _getCases = function() {
  return $http.get('/api/case');
};

But the dates are all strings. Here’s an example of what's received in Angular:

[
  {
    id: 1,
    fruit: “apple”,
    createdOn: "2016-09-02T23:00:00.000Z"
  },
  {
    id: 2,
    fruit: “banana”,
    createdOn: "2016-09-11T23:00:00.000Z”
  },
  {
    id: 3,
    fruit: “cherry”,
    createdOn: "2016-09-13T23:00:00.000Z"
  },
]

I'm converting all the dates to strings in a loop but this seems inefficient. Is there a better way?

var a = $http.get('/api/case');

for(var i in a){
  a[i].createdOn = new Date(a[i].createdOn);
};

return a;

Answer 1

Firstly, regardless of whether you actually want to transform the fields into dates,you will need to format them for display. This formatting should be applied in the template. In such cases, the idiomatic approach is to define a filter.

angular.filter('formatAsDate', ...);

and then inject the filter into the views controller to make it available.

MyController.$inject = ['formatAsDate'];
function MyController(formatAsDate) { }

However, date formatting is such a common scenario that AngularJS provides a built in, globally available (does not need to be injected) date filter out of the box.

Its first argument is a value representing a date. This may either be a Date, an ISO formatted date string such as you have, or a number in milliseconds. Its second argument is a format string which specifies how the date should be displayed.

for example

{{'2016-09-02T23:00:00.000Z' | date: 'EEEE MMMM dd, yyyy'}}

will render

Friday September 02, 2016