Web Designers Journal

Visions Connected To The Web


JSON Object

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”,
“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+.
Filter by Property/ Method:

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)
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.employees=[“George”, “Edward”, “Sarah”] //unsorted array
company.products=[“Twinkies”, “Hoo Hoos”, “Ding Dongs”] //unsorted array

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
companyfinal[prop]=this[prop] //just return original property plus value
return companyfinal //return modified company object to be serialized

var jsontext = JSON.stringify(company)

//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.
(mt) Media Temple (ve) Serverweb hostingFireHost – Secure Cloud Hosting

One Response to JSON Object

  1. cogipedia says:

    After research just a few of the blog posts on your web site now, and I truly like your manner of blogging. I bookmarked it to my bookmark web site list and shall be checking again soon. Pls check out my website as properly and let me know what you think.