javascript - How to handle date fields from a REST Api in AngularJS? - Stack Overflow

admin管理员组

文章数量:1287123

I've got a REST API that returns JSON data with dates in a standard ISO-8601 format: yyyy-MM-ddTHH:mm:ss:

{
    id: 4
    version: 3
    code: "ADSFASDF"
    definition: "asdflkj"
    type: "CONTAINER"
    value: "1234"
    active: "false"
    formula: false
    validTo: "2014-12-31T05:00:00"
    validFrom: "2010-12-31T10:00:00"
}

My issue is that I'm not quite sure how to deal with this in AngularJS. I have a $resource which GETs, POSTs, etc my API endpoints, but when my data is returned, it is stored in my JS object as as String. I figure that it would be easier to handle as a Date() or a Moment().

In Java, I can use a JsonDeserializer to ensure that all JSON data is properly converted prior to being assigned to the model, but I don't know if there is a similar mechanism in AngularJS.

I've searched around, but can't seem to find anything that implements a generalized solution. I realize that I can use a transformResponse function in my $resource, but that seems like a lot of repeated configuration for every data type that may contain a date.

This leads me to wonder if returning the date in an ISO-8601 format is the best way to proceed? If AngularJS doesn't support it out of the box, I presume that there must be an easier way to deal with dates. How does one deal with dates in AngularJS? Should I just be treating them as text/string objects, and have the API return a pre-formatted version? If so, what is the most flexible format to use in an HTML5 date input box, etc?

I've got a REST API that returns JSON data with dates in a standard ISO-8601 format: yyyy-MM-ddTHH:mm:ss:

{
    id: 4
    version: 3
    code: "ADSFASDF"
    definition: "asdflkj"
    type: "CONTAINER"
    value: "1234"
    active: "false"
    formula: false
    validTo: "2014-12-31T05:00:00"
    validFrom: "2010-12-31T10:00:00"
}

My issue is that I'm not quite sure how to deal with this in AngularJS. I have a $resource which GETs, POSTs, etc my API endpoints, but when my data is returned, it is stored in my JS object as as String. I figure that it would be easier to handle as a Date() or a Moment().

In Java, I can use a JsonDeserializer to ensure that all JSON data is properly converted prior to being assigned to the model, but I don't know if there is a similar mechanism in AngularJS.

I've searched around, but can't seem to find anything that implements a generalized solution. I realize that I can use a transformResponse function in my $resource, but that seems like a lot of repeated configuration for every data type that may contain a date.

This leads me to wonder if returning the date in an ISO-8601 format is the best way to proceed? If AngularJS doesn't support it out of the box, I presume that there must be an easier way to deal with dates. How does one deal with dates in AngularJS? Should I just be treating them as text/string objects, and have the API return a pre-formatted version? If so, what is the most flexible format to use in an HTML5 date input box, etc?

• javascript
• json
• angularjs
• rest
• date

Share Improve this question Follow edited Aug 21, 2014 at 1:28 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Aug 21, 2014 at 0:27 Eric B.Eric B. 24.5k5656 gold badges186186 silver badges328328 bronze badges 1

• Use moment js to format your date on client momentjs./docs. Usually the date that you return from server treat as string which it reaches on client. You have to format it by yourself using custom js code or library like moment. Also, I don't think you need to do this in app.config. Just get your data from the server and format the date prop, or you can use Angular filters to format date docs.angularjs/api/ng/filter/date. – Ammar Khan Commented Aug 21, 2014 at 1:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

JSON does not support dates so you will need to send out dates as strings or integers, and convert them to Date objects when suitable. Angular does not do that for you, but you can define a default transformResponse function to $httpProvider. I tried that with $resource and it does affect to it as well, after all, $resource is a higher level abstraction for $http.

If you don't know the structure of your JSON or don't want to rely on it in the conversion function you just need to go it through and convert date-like strings to Date objects.

var convertDates = function(input) {
  for(var key in input) {
    if (!input.hasOwnProperty(key)) continue;

    if (typeof input[key] === "object") {
      convertDates(input[key]);
    } else {
      if (typeof input[key] === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(input[key])) {
        input[key] = new Date(input[key]);
      }
    }
  }
}

app.config(["$httpProvider", function ($httpProvider) {
   $httpProvider.defaults.transformResponse.push(function(responseData){
     convertDates(responseData);
     return responseData;
  });
}]);

Depending on your app this may be unwise from performance perspective (e.g. only a handful of JSON responses contain dates or actually need the dates to be converted) so it might be best to convert the dates in those controllers where that is actually needed.

本文标签： javascriptHow to handle date fields from a REST Api in AngularJSStack Overflow