Date formatting from JSON and HTML tags in angularJS

Question

i have a controller

function TestCtrl($scope)
{
    var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
    var dateFromJson = '/Date(1394526738123)/';

    $scope.Date = dateFromJson;   
    $scope.Content = contentFromJson;
}

and a markup

<div ng-app>
    <div ng-controller="TestCtrl">
        Date is {{Date | date : 'MMM d, y'}}
        <p>{{Content}}</p>
    </div>
</div>

and i expect a result that parse the date to MMM d, y but the problem is the result from json Date is something like this /Date(000000000)/ i don't know the name of the format. :) and also, the html tags are printed as plain text..

Check this jsFiddle for testing

JsFiddle

Thanks in advance..

That's epoch time in milliseconds

Ron
– Ron

2014-05-16 00:39:54 +00:00
Commented May 16, 2014 at 0:39 — Ron
– Ron, Commented May 16, 2014 at 0:39

Community · Accepted Answer · 2017-05-23 11:50:50Z

3

What's happening is, you're trying to parse the Date with the '/Date()/' text in it. So you have to extract the numbers first, then use the filter.

Controller:

function TestCtrl($scope)
{
    var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
    var dateFromJson = '/Date(1394526738123)/';
    var regexPattern = /\d+/g;
    $scope.Date = dateFromJson.match(regexPattern)[0];    
    $scope.Content = contentFromJson;
}

As for the html. Use ng-bind-html-unsafe (angularjs 1.1.1)

<div ng-app>
    <div ng-controller="TestCtrl">
        Date is {{Date | date : 'MMM d, y'}}
        <p ng-bind-html-unsafe="Content"></p>
    </div>
</div>

jsfiddle: http://jsfiddle.net/9NBLB/

edit, here's another way:

https://stackoverflow.com/a/2316066/769083

$scope.Date = new Date(parseInt(dateFromJson.substr(6)));

EDIT

Initialize App and Controller:

var app = angular.module('MyApp', []);

app.controller('TestingCtrl', ['$scope', function ($scope) {

    $scope.Content =
    [
        { Date : '/Date(1394526738123)/', Message : 'Hi! <b>Bold</b>' },
        { Date : '/Date(1394526738143)/', Message : 'Hi! <i>Italic</i>' }
    ];

    $scope.ParseDate = function (dt) {
        return new Date(parseInt(dt.substr(6)));
    }

}]);

Custom Directive uses $observe to read the attribute value then uses element.html() to write the html out:

app.directive("showHtml", function() {
  return {
    restrict: 'A',
    scope: {showHtml: '@'},
    link: function(scope, element, attrs) {
        attrs.$observe('showHtml', function() {
            element.html(scope.showHtml);
        });

    } 
  }
});

Html:

<div ng-app="MyApp">
    <div ng-controller="TestingCtrl">
        <div ng-repeat="content in Content">
            Message: <span show-html="{{content.Message}}"></span> <br />
            Date: {{ParseDate(content.Date) | date : 'MMM d, y'}} <br /><br />
        </div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/fXE5d/6/

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 16, 2014 at 1:03

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vincent Dagpin Over a year ago

about the date, my situation is i got a collection from Json and i use repeater in my markup so i think i can't do the dateFromJson thingy so i thought is there something like date : 'Format from Json date' on the {{ Date }}

mnsr Over a year ago

@VincentDagpin check out this answer: stackoverflow.com/questions/206384/how-to-format-a-json-date

mnsr Over a year ago

jsfiddle.net/fXE5d/5 updated it for you. Just create a method that converts it to a normal date format and call that instead

mnsr Over a year ago

i've updated your code with a custom directive that displays html: jsfiddle.net/fXE5d/6

Ron · Accepted Answer · 2014-05-16 00:52:06Z

1

Looks like you've got to evaluate the JSON date string first.

$scope.Date = eval(dateFromJson.match(/\/(.*)\//)[1]);

edited May 16, 2014 at 0:52

answered May 16, 2014 at 0:42

Ron

1,1665 silver badges15 bronze badges

Comments

Andrew Church · Accepted Answer · 2014-05-16 00:55:25Z

1

Use a library like momentjs to handle the parsing for you. See the fiddle here: http://jsfiddle.net/ahchurch/vkNk2/3/

<div ng-app>
    <div ng-controller="TestCtrl">
        Date is {{Date | date : 'MMM d, y'}}
        <p>{{Content}}</p>
    </div>
</div>

function TestCtrl($scope)
{
    var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
    var dateFromJson = '/Date(1394526738123)/';

    $scope.Date = moment(dateFromJson).valueOf();   
    $scope.Content = contentFromJson;
}

answered May 16, 2014 at 0:55

Andrew Church

1,39111 silver badges13 bronze badges

Collectives™ on Stack Overflow

Date formatting from JSON and HTML tags in angularJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related