angularJS filter date

Question

I am trying to use a filter to filter out a date that is a string. The date I get from an API is

"/Date(1418716652000+0000)/"

I have a function which converts the date to the type I want:

1418716652000

The function is:

$scope.convertDate = function(published_first) {
    var date = (published_first.match(/\(.*\)/, ''));
    var convertedDate = date[0];
    date = eval(convertedDate.replace(/\//g,''));
    return date;
}

My HTML is:

<div id ="news" ng-repeat="new in news | filter:convertDate">
  <h3 class="title" ng-repeat="n in new">
  <span>{{n.title}}</span><br/>
  <div class="title-data">              
    <span ng-if="n.byline.length > 0">by: {{n.byline}}</span>
    <br/>
    <span>
    <span>published: {{n.published_first | date:'medium'}}</span><br/>
    </span>
</div>

I've been trying to run this as a filter in my HTML in the ng-repeat div, but it's not working. I've also tried running the filter in the same span which includes the angular date:'medium' filter. That doesn't work either. Can someone help with what I'm missing?

You need to create a filter. binding the function to the scope is not sufficient. — orange
– orange, Commented Dec 17, 2014 at 0:24
Don't use eval. To convert a String to Number, use +(convertedDate.replace(/\//g,'')) or more semantically: Number(convertedDate.replace(/\//g,'')). — RobG
– RobG, Commented Dec 17, 2014 at 0:25
@RobG I tried Number(convertedDate.replace(/\//g,'')) , but I get: undefined NaN, NaN NaN:NaN:NaN — user3361996
– user3361996, Commented Dec 17, 2014 at 0:48
What value to you get from convertedDate.replace(/\//g,'')? — RobG
– RobG, Commented Dec 17, 2014 at 0:56
You should be able to use date = +published_first.match(/\d+/)[0]. — RobG
– RobG, Commented Dec 17, 2014 at 1:05

musicfuel · Accepted Answer · 2014-12-17 19:12:26Z

It appears that the API you are using presents you with news object with a published_first property in a transport format that you want to present differently, but that data doesn't change at runtime after it is received.

Doing the conversion in markup as a filter or function within any kind of watch means you are constantly converting the date with every event that triggers a digest. It would be preferable to run the convertDate() function from the controller or service that receives the news items and do the conversion against each item as it is received from the API. Under this scenario the conversion from String to Date is done only once for each news item and your markup then becomes:

<span>published: {{n.published_first | date:'medium'}}</span>

Additionally, if you can be assured that the format coming from the API will always be consistent (which it should), you can one line to the conversion to a timestamp with:

$scope.convertDate = function(published_first) {
    return parseInt(published_first.substr(6), 10); 
}

The line removes the initial non-numeric characters for /Date( and parses up to the first non-numeric which will either be + or ) depending on precision.

orange · Accepted Answer · 2014-12-17 00:26:33Z

1

1) Create a filter function like shown here.

module.filter('convertDate', function() {
  return function(published_first) {
    var date = (published_first.match(/\(.*\)/, ''));
    var convertedDate = date[0];
    date = eval(convertedDate.replace(/\//g,''));
    return date;
  };
})

2) Use your filter to format your date:

<div id ="news" ng-repeat="new in news">
  <h3 class="title" ng-repeat="n in new">
  <span>{{n.title}}</span><br/>
  <div class="title-data">              
    <span ng-if="n.byline.length > 0">by: {{n.byline}}</span>
    <br/>
    <span>
    <span>published: {{n.published_first | convertDate | date:'medium'}}</span><br/>
    </span>
</div>

answered Dec 17, 2014 at 0:26

orange

8,25215 gold badges89 silver badges157 bronze badges

Comments

edamon · Accepted Answer · 2014-12-17 01:08:46Z

0

avoid using filters if at all possible. Filters can cause huge performance issues in large applications.

That said, since you put the function on the scope, you can use it in markup:

<span>published: {{convertDate(n.published_first) | date:'medium'}}</span><br/>

answered Dec 17, 2014 at 1:08

edamon

744 bronze badges

6 Comments

orange Over a year ago

Your link has nothing to do with the formatting filter that I suggested. It pertains to subset selection. @user3361996's application of filter was wrong to begin with.

edamon Over a year ago

I'm aware the implementation was wrong in the first place and that your filter implementation is correct. My link pertains to the poor performance of filters, whether they be used for formatting or subset selection. "Avoid using filters if at all possible. They are run twice per digest cycle, once when anything changes, and another time to collect further changes, and do not actually remove any part of the collection from memory, instead simply masking filtered items with css."

orange Over a year ago

I don't read it this way: "...and do not actually remove any part of the collection from memory, instead simply masking filtered items with css" - this doesn't relate to formatting.

orange Over a year ago

In any event, this whole performance consideration isn't worth discussing as it is very context specific and @user3361996 didn't specify the amount of items being rendered. So while it is an interesting side note, it may never actually be a problem for him/her. Making a blanket statement such as "avoid using filters if at all possible" without specifying the context in which this holds is highly dubious.

edamon Over a year ago

downvoting me when you don't understand that there is no difference in formatting filters vs "subset selection" filters when it comes to performance is highly dubious. "Filters can cause huge performance issues in large applications.". large applications. that's context. here's more context for you

|

Collectives™ on Stack Overflow

angularJS filter date

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related