Categories:

JavaScript Kit > JavaScript Reference > Here

JSON Object

Created: March 9th, 2010

JSON, or JavaScript Object Notation, has become a popular alternative to XML for defining structured data using JavaScript. A sample JSON definition that stores some information about Bob may look like the following:

{
 "name": "Bob Miller",
 "age": 27,
 "occupation": "Programmer",
 "contact":{
  "address": "253 Johnson Road",
  "Home_Phone": "544-6443",
  "Cell_Phone": "563-3566"
 }
}

In strict JSON:

  • All string values must be in double quotes (single quotes won't do).
  • The name portion of each name/value pair must also be in double quotes.
  • The value of a property cannot be a function or method.

If your JSON data is not valid strict JSON, it will trip up certain JSON parsers, most notably, the JSON object of JavaScript. So make sure your data is valid syntax wise!

JSON data can be stored on the server as a text file for example, then retrieved using Ajax and converted into an actual JavaScript object for easy parsing. In general there are two ways to parse JSON:

  • Use JavaScript's eval() function to convert the data into an actual JavaScript object. The advantage of this is that it works in older browsers (FF3 and below, IE7 and below, Opera 10 and below). The disadvantage is that it's slow and potentially unsafe unless you pre-screen the data for malicious code/ methods that could be brought to life using eval().
  • Use JavaScript's built in JSON object. It's fast and safe. The only disadvantage is that it's only supported in newer browsers, such as FF3.5+, IE8+, and Opera 10.5+.

Native JSON object

The JSON object provides a native way to convert a JSON object into string, and a JSON string back into a JavaScript object. It is currently supported in FF3.5+, IE8+, and Opera 10.5+.

Methods

Note: "[]" surrounding a parameter below means the parameter is optional.

Methods Description
stringify(obj, [replacer], [space]) Converts a JavaScript object into a JSON string. For example:

var jsonobj={"name":"George", "age":29, "friends":["John", "Sarah", "Albert"]}
var jsonstr=JSON.stringify(jsonobj)
alert(typeof jsonstr) //string

This method supports two optional parameters:

  • replacer: A user defined function or array of String or Number objects that lets you screen each member within the JSON object to conditionally include as part of the string output.
     
  • space: A String or Number object that inserts white space into the JSON string for readability purposes. A Number inserts "x" number of spaces (up to 10) before each name/value pair within the string. A String inserts the specified string (up to 10 characters) before each name/value pair within the string.

The following adds 10 white spaces to the beginning of each member inside the generated the JSON string:

var jsonobj={"name":"George", "age":29, "friends":["John", "Sarah", "Albert"]}
var jsonstr=JSON.stringify(jsonobj, null, 10)

More about the replacer parameter

The replacer parameter can either be a function or an array of String/Numbers. It steps through each member within the JSON object to let you decide what value each member should be changed to. As a function it can return:

  • A number, string, or Boolean, which replaces the property's original value with the returned one.
  • An object, which is serialized then returned. Object methods or functions are not allowed, and are removed instead.
  • Null, which causes the property to be removed.

As an array, the values defined inside it corresponds to the names of the properties inside the JSON object that should be retained when converted into a JSON object.

In the below, I use a replacer function to add 1 to all numeric properties of the resulting JSON string:

var jsonobj={"name":"George", "age":29, "friends":["John", "Sarah", "Albert"]}
var jsonstr=JSON.stringify(jsonobj, function(key, value){
 if (typeof value=="number")
  return value+1
})
//OUTPUT: '{"name":"George", "age":30, "friends":["John", "Sarah", "Albert"]}'

parse(string, [reviver]) Converts a JSON string into a JavaScript object. For example:

var jsonstr='{"name":"George", "age":29, "friends":["John", "Sarah", "Albert"]}'
var george=JSON.parse(jsonstr) //convert JSON string into object
alert(george.age) //alerts 29

parse() supports the optional reviver parameter which is a user defined function to make further changes to the resurrected JSON object. When defined, the reviver function is applied recursively to every member of the object and replaces each one with the value returned by the function. If the reviver function returns null, the member is deleted. The reviver function is commonly used to transform ISO date strings within a JSON string into actual Date objects upon the string is converted to a JSON object.

In the following example, I store today's date (in milliseconds) inside an object's property:

var jobduty={"thedate":new Date().getTime(), "thetask": "Take out garbage"}

When we convert this object to a JSON string then back into a JSON object, the property "thedate" by default returns a numeric representation of the date in milliseconds, not an actual date object:

var jobstr=JSON.stringify(jobduty)
var jobjson=JSON.parse(jobstr)
alert(jobjson.thedate+" "+typeof jobjson.thedate) //12424353534566 number

Using a reviver function, we can change that so the property returns an actual date representation of the date:

var jobstr=JSON.stringify(jobduty)
var jobjson=JSON.parse(jobstr, function(key, value){
if (key=="thedate") //if "thedate" property
 return new Date(value)
else
 return value
}
)
alert(jobjson.thedate+" "+typeof jobjson.thedate) //alerts Tue Mar 09 2010 00:02:23 GMT-0800 (Pacific Standard Time) object

In this case I check to see if the property currently being worked on is "thedate", and if so, call new Date() on the property's value to return a date object representation of it.

toJSON()  toJSON() dictates how a JSON string will be serialized when JSON.stringify() is called. If this method is defined within the JSON object, its return value will be used by JSON.stringify() to form the new JSON string.

The below example defines a toJSON() method inside the JSON object we wish to serialize to sort any arrays within the object when it's converted into a JSON string:

var company={}
company.name="Tasties"
company.employees=["George", "Edward", "Sarah"] //unsorted array
company.products=["Twinkies", "Hoo Hoos", "Ding Dongs"] //unsorted array

company.toJSON=function(){
 var companyfinal={} //new object
 for (var prop in this){ //loop through each property within company
  if (this[prop] instanceof Array) //if this property is an array
   companyfinal[prop]=this[prop].sort() //sort it
  else
   companyfinal[prop]=this[prop] //just return original property plus value
 }
 return companyfinal //return modified company object to be serialized
}

var jsontext = JSON.stringify(company)
alert(jsontext)

//ALERTS: {"name":"Tasties","employees":["Edward","George","Sarah"],"products":["Ding Dongs","Hoo Hoos","Twinkies"]}

The toJSON() object also exists natively on the Date, Number, String, and Boolean objects.


Reference List

Partners
Right column

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.