jQuery parseJSON automatic date conversion for Asp.net and ISO date strings

This one's quite common. You asynchronously communicate (a.k.a. Ajax) with your server and get JSON data in return. You most probably use $.parseJSON() on the client side which actually parses JSON string and returns an object. We've all used that. But (yes, there's always a but) there's a catch. There's no defined standard for date serialization, so jQuery will not parse your dates back to dates. What the heck even native JSON parser (these days supported in all major browsers) won't do that. So you have to do it yourself. Manually. Or, modify default jQuery functionality a bit and get it done automatically.

Browsers' native JSON support

Nowadays major browsers (Firefox, Internet Explorer and Google Chrome) natively support JSON serialization and deserialization which comes in two methods, one for each operation:

• object serialization to JSON string:
  window.JSON.stringify(object data, [optional] function|array replacer, [optional] string space)
• JSON string deserialization to object:
  window.JSON.parse(string data, [optional] function reviver)

All three browsers support basic JSON mangling (without optional parameters) but not all support optional parameters that make it possible to do custom serialization/deserialization conversions. These optionals are supported as follows:

• Internet Explorer natively supports JSON since version 8 including optional parameters usage,
• Firefox natively supports JSON since version 3.5 but it wasn't until version 3.5.4 that it supports optional parameters,
• I can't seem to find any valuable information about Google Chrome (haven't invested too much time to this either - anyone with any information drop me a comment); I've tested my latest version (which is 8.0.552.224 as of today) and it supports JSON as well as optional parameters.

No Date support in JSON specification

JSON specification doesn't support Date data type. That's why dates will not get auto-converted to their actual dates when parsing JSON strings back to actual objects. Lack of Date data type support in JSON specification results in one single problem: How should dates be serialized? Since there's not standard, each framework thinks is smarter than the other and serializes them in their own way.

If we just use native browser JSON support all tree major browsers create a similar string following ISO 8601 standard. Internet Explorer and Firefox don't include milliseconds in the string, Chrome does. But nevertheless they are all consistent when it comes to serializing dates. This is how serialized dates look like in Internet Explorer and Firefox: "2010-12-27T10-57-06Z" or in case of Chrome which includes milliseconds "2010-12-27T10-57-06.736Z" But even though when dates are in this format using window.JSON.parse() function will not automatically convert them back to actual dates. So doing something like this:

   1:  var str = window.JSON.stringify({myDate:new Date()});

   2:  // str == "{"myDate":"2010-12-27T11:59:18.119Z"}"

   3:  var obj = window.JSON.parse(str);

   4:  // obj.myDate == "2010-12-27T11:59:18.119Z"

will not yield same results as our initial object. We still end up with strings instead of dates. The main reason being is again lack of Date data type in JSON specification. Hence parser doesn't really know what a certain string represents other than a string.

Asp.net JSON serialization (including Asp.net MVC)

As mentioned browsers are quite consistent when it comes to date serialization. The same can't be said about server-side libraries. At least not Microsoft's Asp.net that uses one of the two serialization classes: JavaScriptSerializer or DataContractJsonSerializer that's used with WCF services. But they both produce strings like "\/Date(1291244400000)\/" which can be used in Javascript to create Date objects, but the main idea being that this string is completely different to how native JSON serializers in browsers serialize dates.

It's even more ridiculous that this kind of date serialization is not understood by Asp.net MVC default data binder when data gets back to the server. You will get a runtime error if you try to pass this kind of string to your action method with DateTime parameter. Bad luck. Interestingly enough it does understand default browser serializations namely ISO standard dates. The main reason is that Asp.net MVC doesn't use JavaScriptSerializer for data deserialization. Basically it doesn't support JSON data binding until version 3 where you have to register a special value provider factory for it to start working.

jQuery library and JSON support

jQuery doesn't support JSON serialization but it supports string deserialization back to objects by using $.parseJSON(string data) which abstracts away the knowledge whether your browser has native JSON support or not. jQuery's function will reliably convert JSON strings to objects. But as you may've suspected it doesn't convert dates either. Function itself is quite smart because it uses native JSON functionality if it exists (resulting in much faster deserialization) or does its own parsing when native support isn't present. And it doesn't use eval() either.

jQuery reusable extension that supports auto date conversion

jQuery library only uses basic native JSON browser functionality (when it exists) so it doesn't provide any special conversion techniques which can easily be used with dates parsing. The main idea here is that I extended default jQuery's $.parseJSON() functionality by a bit more sophisticated function that can auto-convert dates when we want it to. My extension is therefore completely backwards compatible with existing code, but when you provide the additional boolean parameter and set its value to true your dates in JSON strings (either Asp.net dates or ISO dates) will get converted to actual dates. The good thing's also that it doesn't traverse resulting objects but rather converts dates on the go. And it reliably works in browsers that have extended native JSON support or those that don't. So it really can be reused for any project. Just include this code in your client scripts.

   1:  /*!

   2:   * jQuery.parseJSON() extension (supports ISO & Asp.net date conversion)

   3:   *

   4:   * Version 1.0 (13 Jan 2011)

   5:   *

   6:   * Copyright (c) 2011 Robert Koritnik

   7:   * Licensed under the terms of the MIT license

   8:   * http://www.opensource.org/licenses/mit-license.php

   9:   */

  10:  (function ($) {

  11:   

  12:      // JSON RegExp

  13:      var rvalidchars = /^[\],:{}\s]*$/;

  14:      var rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;

  15:      var rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;

  16:      var rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g;

  17:      var dateISO = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:[.,]\d+)?Z/i;

  18:      var dateNet = /\/Date\((\d+)(?:-\d+)?\)\//i;

  19:   

  20:      // replacer RegExp

  21:      var replaceISO = /"(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:[.,](\d+))?Z"/i;

  22:      var replaceNet = /"\\\/Date\((\d+)(?:-\d+)?\)\\\/"/i;

  23:   

  24:      // determine JSON native support

  25:      var nativeJSON = (window.JSON && window.JSON.parse) ? true : false;

  26:      var extendedJSON = nativeJSON && window.JSON.parse('{"x":9}', function(k,v){return "Y";}) === "Y";

  27:   

  28:      var jsonDateConverter = function(key, value) {

  29:          if (typeof(value) === "string")

  30:          {

  31:              if (dateISO.test(value))

  32:              {

  33:                  return new Date(value);

  34:              }

  35:              if (dateNet.test(value))

  36:              {

  37:                  return new Date(parseInt(dateNet.exec(value)[1], 10));

  38:              }

  39:          }

  40:          return value;

  41:      };

  42:   

  43:      $.extend({

  44:          parseJSON: function(data, convertDates) {

  45:              /// <summary>Takes a well-formed JSON string and returns the resulting JavaScript object.</summary>

  46:              /// <param name="data" type="String">The JSON string to parse.</param>

  47:              /// <param name="convertDates" optional="true" type="Boolean">Set to true when you want ISO/Asp.net dates to be auto-converted to dates.</param>

  48:   

  49:              if (typeof data !== "string" || !data) {

  50:                  return null;

  51:              }

  52:   

  53:              // Make sure leading/trailing whitespace is removed (IE can't handle it)

  54:              data = $.trim(data);

  55:   

  56:              // Make sure the incoming data is actual JSON

  57:              // Logic borrowed from http://json.org/json2.js

  58:              if (rvalidchars.test(data

  59:                  .replace(rvalidescape, "@")

  60:                  .replace(rvalidtokens, "]")

  61:                  .replace(rvalidbraces, "")))

  62:              {

  63:                  // Try to use the native JSON parser

  64:                  if (extendedJSON || (nativeJSON && convertDates !== true))

  65:                  {

  66:                      return window.JSON.parse(data, convertDates === true ? jsonDateConverter : undefined);

  67:                  }

  68:                  else

  69:                  {

  70:                      data = convertDates === true ?

  71:                          data.replace(replaceISO, "new Date(parseInt('$1',10),parseInt('$2',10)-1,parseInt('$3',10),parseInt('$4',10),parseInt('$5',10),parseInt('$6',10),(function(s){return parseInt(s,10)||0;})('$7'))")

  72:                              .replace(replaceNet, "new Date($1)") :

  73:                          data;

  74:                      return (new Function("return " + data))();

  75:                  }

  76:              } else

  77:              {

  78:                  $.error("Invalid JSON: " + data);

  79:              }

  80:          }

  81:      });

  82:  })(jQuery);

Any questions, bugs, comments?

Let me know if you have any information about Google Chrome native and extended JSON support. If you have any further questions or would like to report a bug or suggest additional code improvements, you're more than welcome to drop me a comment.