Prototype and JSON Tutorial

Advertisements

Previous Page
Next Page  

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.

S.No. Method & Description
1. Number.toJSON()

Returns a JSON string for the given Number.
2. String.toJSON()

Returns a JSON string for the given String.
3. Array.toJSON()

Returns a JSON string for the given Array.
4. Hash.toJSON()

Returns a JSON string for the given Hash.
5. Date.toJSON()

Converts the date into a JSON string (following the ISO format used by JSON).
6. Object.toJSON()

Returns a JSON string for the given Object.

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