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..

Answer 1

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/

Answer 2

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

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

Answer 3

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;
}