JSON

  • Revision slug: JSON
  • Revision title: JSON
  • Revision id: 16768
  • Created:
  • Creator: MarkFinkle
  • Is current revision? No
  • Comment

Revision Content

JSON (JavaScript Object Notation) is a data-interchange format, based on a subset of JavaScript syntax. It is useful when writing any kind of JavaScript-based application, including extensions. See http://json.org/ for details.

Native JSON support is anticipated in one of future versions of JavaScript ({{template.Bug(340987)}}).

One great use of JSON is to easily store objects in preferences as char preferences. {{template.Note("The rest of this article is tailored towards extension and XUL application developers.")}}

JSON in Firefox 2

No JSON support is included in Firefox 2. Using the code from json.org can be problematic and raise variations on {{template.Bug(397595)}}. You should adapt the code from json.org or from {{template.Source("js/src/xpconnect/loader/JSON.jsm", "JSON.jsm")}}, which provides a JSON object which can be used to serialize to JSON and parse JSON.

JSON in Firefox 3

Firefox 3 introduced the {{template.Interface("nsIJSON")}} interface, which provides easy to use support for encoding and decoding JSON strings from JavaScript code. Firefox 3 also includes a JavaScript code module for JSON encoding and decoding, JSON.jsm. The code module can be imported using Components.utils.import.

Using JSON

Quick Warning

When writing privileged code, such as extensions, be careful to not just eval JSON strings (any strings, actually) from untrusted source. Either use a JSON decoder (best), Components.utils.evalInSandbox, or parseJSON from json.org.

Using JSON.jsm

To serialize a javascript object:

Components.utils.import("resource://gre/modules/json.jsm");

var foo = {};
foo.bar = "new property";
foo.baz = 3;
var JSONfoo = JSON.toString(foo);

The JSONfoo now holds {"bar":"new property","baz":3}. To make JSONfoo back into a JavaScript object just do:

var backToJS = JSON.fromString(JSONfoo);

Using nsIJSON

To serialize a javascript object:

var Ci = Components.interfaces;
var Cc = Components.classes;

var foo = {};
foo.bar = "new property";
foo.baz = 3;

var nativeJSON = Cc["@mozilla.org/dom/json;1"].createInstance(Ci.nsIJSON);
var JSONfoo = nativeJSON.encode(foo);

The JSONfoo now holds {"bar":"new property","baz":3}. To make JSONfoo back into a JavaScript object just do:

var backToJS = nativeJSON.decode(JSONfoo);

Limitations

You cannot serialize an object that has members which are functions. The JSON specification does not allow it. For example:

foo.qwerty = function(){alert('foobar');};
foo.qwerty()
var JSONfoo = JSON.toString(foo);

will raise a TypeError on line XXX: No JSON representation for this object!

See also

{{ wiki.languages( { "ja": "ja/JSON" } ) }}

Revision Source

<p><b>JSON</b> (<b>JavaScript Object Notation</b>) is a data-interchange format, based on a subset of <a href="en/JavaScript">JavaScript</a> syntax. It is useful when writing any kind of JavaScript-based application, including extensions. See http://json.org/ for details.
</p><p>Native JSON support is anticipated in one of future versions of JavaScript ({{template.Bug(340987)}}). 
</p><p><span class="comment">One great use of JSON is to easily store objects in preferences as char preferences.</span>
{{template.Note("The rest of this article is tailored towards extension and XUL application developers.")}}
</p>
<h2 name="JSON_in_Firefox_2"> JSON in Firefox 2 </h2>
<p>No JSON support is included in Firefox 2. Using the code from <a class="external" href="http://json.org">json.org</a> can be problematic and raise variations on {{template.Bug(397595)}}. You should adapt the code from json.org or from {{template.Source("js/src/xpconnect/loader/JSON.jsm", "JSON.jsm")}}, which provides a JSON object which can be used to serialize to JSON and parse JSON.
</p>
<h2 name="JSON_in_Firefox_3"> JSON in Firefox 3 </h2>
<p>Firefox 3 introduced the {{template.Interface("nsIJSON")}} interface, which provides easy to use support for encoding and decoding JSON strings from JavaScript code. Firefox 3 also includes a JavaScript code module for JSON encoding and decoding, JSON.jsm. The code module can be imported using <code><a href="en/Components.utils.import">Components.utils.import</a></code>.
</p>
<h2 name="Using_JSON"> Using JSON </h2>
<h3 name="Quick_Warning"> Quick Warning </h3>
<p>When writing privileged code, such as extensions, be careful to not just <a href="en/Core_JavaScript_1.5_Reference/Global_Functions/eval">eval</a> JSON strings (any strings, actually) from untrusted source. Either use a JSON decoder (best), <a href="en/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>, or <code>parseJSON</code> from json.org. 
</p>
<h3 name="Using_JSON.jsm"> Using JSON.jsm </h3>
<p>To serialize a javascript object: 
</p>
<pre class="eval">Components.utils.import("resource://gre/modules/json.jsm");

var foo = {};
foo.bar = "new property";
foo.baz = 3;
var JSONfoo = JSON.toString(foo);
</pre>
<p>The <code>JSONfoo</code> now holds <code>{"bar":"new property","baz":3}</code>. To make <code>JSONfoo</code> back into a JavaScript object just do:
</p>
<pre class="eval">var backToJS = JSON.fromString(JSONfoo);
</pre>
<h3 name="Using_nsIJSON"> Using nsIJSON </h3>
<p>To serialize a javascript object: 
</p>
<pre class="eval">var Ci = Components.interfaces;
var Cc = Components.classes;

var foo = {};
foo.bar = "new property";
foo.baz = 3;

var nativeJSON = Cc["@mozilla.org/dom/json;1"].createInstance(Ci.nsIJSON);
var JSONfoo = nativeJSON.encode(foo);
</pre>
<p>The <code>JSONfoo</code> now holds <code>{"bar":"new property","baz":3}</code>. To make <code>JSONfoo</code> back into a JavaScript object just do:
</p>
<pre class="eval">var backToJS = nativeJSON.decode(JSONfoo);
</pre>
<h3 name="Limitations"> Limitations </h3>
<p>You cannot serialize an object that has members which are functions. The JSON specification does not allow it. For example:
</p>
<pre class="eval">foo.qwerty = function(){alert('foobar');};
foo.qwerty()
var JSONfoo = JSON.toString(foo);
</pre>
<p>will raise a <code>TypeError on line XXX: No JSON representation for this object!</code>
</p>
<h3 name="See_also">See also</h3>
<ul><li> <a href="en/JSON/JSONPath">JSONPath</a>
</li></ul>
<div class="noinclude">
</div>
{{ wiki.languages( { "ja": "ja/JSON" } ) }}
Revert to this revision