JavaScript - - By Craig Buckler

Cross-browser JSON Serialization in JavaScript

JavaScript JSON serializationIn this article we will examine the benefits of object serialization, the current browser implementations, and develop some code that could help your Ajax-based projects.

Assume we have a fairly complex JavaScript object defined using literal notation:


var obj1 = {
	b1: true,
	s1: "text string",
	n1: 12345,
	n2: null,
	n3: undefined,
	a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
	o1: {
		a: [3, 2, 1],
		b: {
			c: 42,
			d: [ 3.14, 1.618 ]
		}
	}
};

We can access any of the object properties in a variety of ways:


obj1.s1;				// returns "text string"
obj1["n1"];				// returns 12345
obj1.a1[6][1];			// returns 21
obj1["o1"]["b"]["c"];	// returns 42

This object can also be passed to JavaScript functions and methods rather than specifying individual arguments. Useful stuff.

However, what if we need to store this object in a cookie? What if we need to pass the object to a web services via an Ajax request? What if that web service wants to return a modified version of the object? The answer is serialization:

  • Serialization is the process of turning any object into a string.
  • De-serialization turns that string back into a native object.

Perhaps the best string notation we can use in JavaScript is JSON — JavaScript Object Notation. JSON is a lightweight data-interchange format inspired by JavaScript object literal notation as shown above. JSON is supported by PHP and many other server-side languages (refer to json.org).

There are two JSON methods in JavaScript:

  1. JSON.stringify(obj) — converts an JavaScript object to a JSON string
  2. JSON.parse(str) — converts a JSON string back to a JavaScript object

Unfortunately, very few browsers provide these methods. To date, only Firefox 3.5, Internet Explorer 8.0 and Chrome 3 beta offer native support. Some JavaScript libraries offer their own JSON tools (such as YUI) but many do not (including jQuery).

However, all is not lost — JavaScript is flexible and we can implement the JSON stringify and parse methods whenever a browser requires them.

At the top of our code, we will create a JSON variable that points to the native JSON object or an empty object if it is unavailable:


var JSON = JSON || {};

The JSON.stringify code is a little more complex:


// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {

	var t = typeof (obj);
	if (t != "object" || obj === null) {

		// simple data type
		if (t == "string") obj = '"'+obj+'"';
		return String(obj);

	}
	else {

		// recurse array or object
		var n, v, json = [], arr = (obj && obj.constructor == Array);

		for (n in obj) {
			v = obj[n]; t = typeof(v);

			if (t == "string") v = '"'+v+'"';
			else if (t == "object" && v !== null) v = JSON.stringify(v);

			json.push((arr ? "" : '"' + n + '":') + String(v));
		}

		return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
	}
};

If JSON.stringify is not available, we define a new function that accepts a single obj parameter. The parameter can be a single value, an array, or a complex object such as obj1 above.

The code examines the object type. Single values are returned immediately and only strings are modified to put quotes around the value.

If an array or object is passed, the code iterates through every property:

  1. Strings values have quotes added.
  2. Child arrays or objects are recursively passed to the JSON.stringify function.
  3. The resulting values are added to the end of a json[] array as a “name : value” string, or just a single value for array items.
  4. Finally, the json array is converted to a comma-delimited list and returned within array [] or object {} brackets as necessary.

If your brain’s aching, you’ll be pleased to know that the JSON.parse code is much simpler:


// implement JSON.parse de-serialization
JSON.parse = JSON.parse || function (str) {
	if (str === "") str = '""';
	eval("var p=" + str + ";");
	return p;
};

This converts a JSON string to an object using eval().

Before you rush off to implement JSON serialization functions in all your projects, there are a few gotchas:

  • This code has been intentionally kept short. It will work in most situations, but there are subtle differences with the native JSON.stringify and JSON.parse methods.
  • Not every JavaScript object is supported. For example, a Date() will return an empty object, whereas native JSON methods will encode it to a date/time string.
  • The code will serialize functions, e.g. var obj1 = { myfunc: function(x) {} }; whereas native JSON methods will not.
  • Very large objects will throw recursion errors.
  • The use of eval() in JSON.parse is inherently risky. It will not be a problem if you are calling your own web services, but calls to third-party applications could accidentally or intentionally break your page and cause security issues. If necessary, a safer (but longer and slower) JavaScript parser is available from json.org.

I hope you find the code useful. Feel free to use it in your own projects.

Resource files:

Related reading:

Coming soon: a useful application of JSON serialization…

Sponsors