Prototype and JSON Tutorial

Introduction to JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format.

• JSON is easy for humans to read and write.

• JSON is easy for machines to parse and generate.

• JSON is based on a subset of the JavaScript Programming Language.

• JSON is notably used by APIs all over the web and is a fast alternative to XML in Ajax requests.

• JSON is a text format that is completely language independent.

Prototype 1.5.1 and later version, features JSON encoding and parsing support.

JSON Encoding

Prototype provides the following methods for encoding −

NOTE − Make sure have at least have the version 1.6 of prototype.js.

If you are unsure of the type of data you need to encode, your best bet is to use Object.toJSON so −

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

This will produce the following result −

'{"name": "Violet", "occupation": "character", "age": 25}'

Furthermore, if you are using custom objects, you can set your own toJSON method, which will be used by Object.toJSON. For example −

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

This will produce the following result −

'"My name is John and I am 49 years old."'

Parsing JSON

In JavaScript, parsing JSON is typically done by evaluating the content of a JSON string. Prototype introduces String.evalJSON to deal with this. For example −

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

This will produce the following result −

"Violet"

Using JSON with Ajax

Using JSON with Ajax is very straightforward. Simply invoke String.evalJSON on the transport's responseText property −

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

If your data comes from an untrusted source, be sure to sanitize it −

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});