JSON and AJAX

Stringify

The stringify function converts a javascript object to a JSON string. The function takes two parameters:

var JSONObject = JSON.stringify(javascript object, replacer);

The first parameter is the javascript object that has to be converted to JSON string. The second parameter 'replacer' is optional. The function returns the JSON object.

For example, if you have a javascript object as follows:

function bookInfo(name, author, price, availability)
{
this.name = name;
this.author = author;
this.price = price;
this.availability = availability;
}
var book = new Array(5);
book[0] = new bookInfo("Understanding C++", "Robert", 75, "yes");
book[1] = new bookInfo("Understanding C", "Ritchie", 145, "yes");
book[2] = new bookInfo("Understanding LISP", "Howard", 105, "no");
book[3] = new bookInfo("Understanding BASIC", "Felix", 25, "yes");
book[4] = new bookInfo("Understanding Javascript", "Christopher", 45, "yes");

When you use the stringify function, it will be converted to the following string:

[
{"name":"Understanding C++", "author":"Robert","price":75,"availability":"yes"},
{"name":"Understanding C", "author":"Ritchie","price":145,"availability":"yes"},
{"name":"Understanding LISP", "author":"Howard","price":105,"availability":"no"},
{"name":"Understanding BASIC", "author":"Felix","price":25,"availability":"yes"},
{"name":"Understanding Javascript", "author":"Christopher","price":45,"availability":"yes"}
]

Remember that the stringify function will only convert the javascript to a 'JSON string' and not a 'JSON object'. So if you have:

var JSONString = JSON.stringify(book);

You CAN NOT access JSONString.name. You will have to use the JSON.parse() method for that. Also, remember to include the json2.js file.

Cyclic Javascript Objects

The stringify function will NOT take cyclic javascript objects. This means, you can not have an object like this:

function bookInfo(name)
{
this.title = bookInfo;
this.name = name;
}
var book = new bookInfo;

The above object is cyclic because this.title is assigned bookInfo again (much like a recursive function). So in the above cyclic function, you could actually access book.title.name

Example:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script src="json2.js"></script>
<script type="application/javascript">

function bookInfo(name, author, price, availability)
{
this.name = name;
this.author = author;
this.price = price;
this.availability = availability;
}
var book = new Array(5);
book[0] = new bookInfo("Understanding C++", "Robert", 75, "yes");
book[1] = new bookInfo("Understanding C", "Ritchie", 145, "yes");
book[2] = new bookInfo("Understanding LISP", "Howard", 105, "no");
book[3] = new bookInfo("Understanding BASIC", "Felix", 25, "yes");
book[4] = new bookInfo("Understanding Javascript", "Christopher", 45, "yes");

function convert()
{
var JSONString = JSON.stringify(book);

// Display the JSON string in the div element
document.getElementById("jsonString").innerHTML = JSONString;
}

</script>
<title>JSON Stringify</title>
</head>
<body>
<div id="jsonString"></div>
<button type="button" onclick="convert()">Show JSON String</button>
<span>Click this button to convert the javascript object to JSON string</span>
</body>
</html>

Note: To try the above example, copy and paste it in a text editor and save it as a HTML file. Open the file from your browser. You should see the 'Show JSON String' button as you see below. Click the button to see the converted JSON string.

Click this button to convert the javascript object to JSON string