JSON Tutorial

29
 JSON in JavaScript JSON stands for JavaScript Object Notation that is a language i ndependent text format which is fast and easy to understand. That means it is really very simple and easy to learn without sparing much time. In another words we can say that JavaScript Object Notation is a lightweight data-interchange format that is completely language independent but with some conventions. So in this section of JSON t utorial we are going to discuss JSON with JavaScript. Creating Object in JavaScript using JSON We can create objects in JSON with JavaScript in many ways : 1. "var JSONObjectName ={};" will create an empty object. 2. "var JSONObjectName= new Object();" will create a new Object. 3. "var JSONObjectName = { "name ":"amit", "age":23}; will create an Object with attribute name which contains value in String and age with numeric value. Now by creating this object we can access attributes by only "." operator. Here is the full example code for creating an Object in JavaScript using JSON: ObjectJavaScript-JSON.htm  <html> <head> <title> Object creation in JSON in JavaScript </title> <script language="javascript" > var JSONObject = { "name" : "Amit", "address" : "B-123 Bangalow", "age" : 23, "phone" : "011-4565763", "MobileNo" : 0981100092 }; document.write("<h2><font color='blue'>Name</font>::" +JSONObject.name+"</h2>"); document.write("<h2><font color='blue'>Address</font>::" +JSONObject.address+"</h2>"); document.write("<h2><font color='blue'>Age</font>::" +JSONObject.age+"</h2>"); document.write("<h2><font color='blue'>Phone No.</font>::" +JSONObject.phone+"</h2>"); document.write("<h2><font color='blue'>Mobile No.</font>::" +JSONObject.MobileNo+"</h2>");

Transcript of JSON Tutorial

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 1/29

JSON in JavaScript 

JSON stands for JavaScript Object Notation that is a language independent text format whichis fast and easy to understand. That means it is really very simple and easy to learn without

sparing much time. In another words we can say that JavaScript Object Notation is alightweight data-interchange format that is completely language independent but with someconventions.

So in this section of JSON tutorial we are going to discuss JSON with JavaScript.

Creating Object in JavaScript using JSON 

We can create objects in JSON with JavaScript in many ways :

1. "var JSONObjectName ={};" will create an empty object.

2. "var JSONObjectName= new Object();" will create a new Object.

3. "var JSONObjectName = { "name ":"amit", "age":23}; will create an Object withattribute name which contains value in String and age with numeric value.

Now by creating this object we can access attributes by only "." operator.

Here is the full example code for creating an Object in JavaScript using JSON:

ObjectJavaScript-JSON.htm 

<html><head><title>Object creation in JSON in JavaScript</title><script language="javascript" >var JSONObject = { "name" : "Amit",

"address" : "B-123 Bangalow","age" : 23,

"phone" : "011-4565763","MobileNo" : 0981100092 

};

document.write("<h2><font color='blue'>Name</font>::"+JSONObject.name+"</h2>");

document.write("<h2><font color='blue'>Address</font>::"+JSONObject.address+"</h2>");

document.write("<h2><font color='blue'>Age</font>::"+JSONObject.age+"</h2>");

document.write("<h2><font color='blue'>Phone No.</font>::" +JSONObject.phone+"</h2>");

document.write("<h2><font color='blue'>Mobile No.</font>::"+JSONObject.MobileNo+"</h2>");

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 2/29

</script></head><body><h3>Example of object creation in JSON in JavaScript</h3></body></html> 

Output:

To run this JavaScript and JSON example you have to just run this ".htm" file on your

browser. 

Creating Array Objects in JavaScript with

JSON 

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 3/29

In the previous section of JavaScript-JSON tutorial you have known that how to create an objectand now in this tutorial we have provided you the way array of objects are declared inJavaScript-JSON.

In our example file we have created an object "students" which contains two array objects

"Maths" and "Science" containing name, marks and age of two students. Now we can accessthese objects value in the following way:

"students.Maths" for accessing Maths array and "students.Science" for accessing Science array object. Now to access first element of the Maths array we can write it as"students.Maths[1]" and then we can access elements of this array as"students.Maths[1].Name" for name and "students.Maths[1].Marks" for marks of the firststudent in Maths and so on.

Here is the full example code for JavaScript-JSONArray.htm file.

JavaScript-JSONArray.htm 

<html><head><title>Array JSON-JavaScript Example</title><script language="javascript" >var students = { "Maths" : [

{"Name" : "Amit", // First element "Marks" : 67,"age" : 23 },{

"Name" : "Sandeep", // Second element "Marks" : 65,"age" : 21 }

],"Science" : [

{"Name" : "Shaili", // First Element "Marks" : 56,"age" : 27 },"Name" : "Santosh", // Second Element "Marks" : 78,"age" : 41 }

]}

// Printing all array valuesvar i=0 document.writeln("<table border='1'><tr>");for(i=0;i<students.Maths.length;i++){

document.writeln("<td>");document.writeln("<table border='0' width=100 >");document.writeln("<tr><td><B>Name</B></td><td width=50>" 

+students.Maths[i].Name+"</td></tr>");

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 4/29

  document.writeln("<tr><td><B>Marks</B></td><td width=50>"+students.Maths[i].Marks +"</td></tr>");

document.writeln("<tr><td><B>Age</B></td><td width=50>" +students.Maths[i].age +"</td></tr>");

document.writeln("</table>");document.writeln("</td>");

}for(i=0;i<students.Science.length;i++){

document.writeln("<td>");document.writeln("<table border='0' width=100 >");document.writeln("<tr><td><B>Name</B></td><td width=50>" 

+students.Science[i].Name+"</td></tr>");document.writeln("<tr><td><B>Marks</B></td><td width=50>" 

+students.Science[i].Marks +"</td></tr>");document.writeln("<tr><td><B>Age</B></td><td width=50>"

+students.Science[i].age +"</td></tr>");document.writeln("</table>");document.writeln("</td>");

}

document.writeln("</tr></table>");</script></head><body>Using Array of objects via JSON in JavaScript</body></html> 

Output:

To run this example create JavaScript-JSONArray.htm and run it on browser for output.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 5/29

 

Creating Message in JSON with JavaScriptIn previous section you have studied about the JSON in JavaScript's some basic concepts of creating a simple object and creating an array of objects. Now we are going to discuss how tocreate a message with JSON in JavaScript.

In this example of creating message in JSON with JavaScript we have included "json2.js" filefirst. After this we have created an object variable students which contains two array objects .Again we have created an array object and pushed one array data into it. Message is then createdby converting array object to string by using the function "toJSONString()" . Here is the

example code of CreatingMessage.htm : 

CreatingMessage.htm

<html><head><title>Creating Message using JSON in JavaScript</title><script language="javascript" src="json2.js"></script><script language="javascript" >

var students = { "Maths" : [{ "Name" : "Amit",

// First element "Marks" : 67,"age" : 23 },

{

"Name" : "Sandeep", // Second element "Marks" : 65,"age" : 21 }

],"Science" : [

{ "Name" : "Shaili",// First Element 

"Marks" : 56,"age" : 27 },

{ "Name": "Santosh", // Second Element 

"Marks" : 78,"age" : 41 }

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 6/29

  ]}

// Printing array elements valuesvar i=0 var arrayObject = new Array();for(i=0;i<students.Maths.length;i++)

{ arrayObject.push(students.Maths[i].Name);arrayObject.push(students.Maths[i].Marks);arrayObject.push(students.Maths[i].age);

}alert("Welcome to JSON Message Example ");alert(arrayObject.toJSONString());

</script></head><body>Message creation using JSON in JavaScript</body></html> 

To run this example you need to include the JavaScript file "json2.js" so that the functionsdefined for converting objects to string and parse them can be done. This can be downloadedfrom http://www.json.org/json2.js

Here is the "json2.js" file code: 

 /*son.js

2008-05-25

Public DomainNo warranty expressed or implied. Use at your own risk.This file has been superceded byhttp://www.JSON.org/json2.jsSee http://www.JSON.org/js.htmlThis file adds these methods to JavaScript:array.toJSONString(whitelist)boolean.toJSONString()date.toJSONString()

number.toJSONString()object.toJSONString(whitelist)string.toJSONString()These methods produce a JSON text from a JavaScriptvalue.It must not contain any cyclical references. Illegal valueswill be excluded.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 7/29

The default conversion for dates is to an ISO string. Youcanadd a toJSONString method to any date object to get adifferentrepresentation.

The object and array methods can take an optionalwhitelistargument. A whitelist is an array of strings. If it isprovided,keys in objects not found in the whitelist are excluded.

string.parseJSON(filter)This method parses a JSON text to produce an object orarray. It can throw a SyntaxError exception.

The optional filter parameter is a function which canfilter andtransform the results. It receives each of the keys andvalues, andits return value is used instead of the original value. If itreturns what it received, then structure is not modified. If itreturns undefined then the member is deleted.

Example:

 // Parse the text. If a key contains the string 'date' then // convert the value to a date.

myData = text.parseJSON(function (key, value) {return key.indexOf('date') >= 0 ? new Date(value) :value;});

This file will break programs with improper for..in loops.Seehttp://yuiblog.com/blog/2006/09/26/for-in-intrigue/ 

This file creates a global JSON object containing twomethods: stringifyand parse.

JSON.stringify(value, replacer, space)value any JavaScript value, usually an object or array.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 8/29

replacer an optional parameter that determines howobjectvalues are stringified for objects without a toJSONmethod. It can be a function or an array.

space an optional parameter that specifies the indentationof nested structures. If it is omitted, the text willbe packed without extra whitespace. If it is a number,it will specify the number of spaces to indent at eachlevel. If it is a string (such as '\t' or '&nbsp;'),it contains the characters used to indent at each level.

This method produces a JSON text from a JavaScriptvalue.

When an object value is found, if the object contains a

toJSONmethod, its toJSON method will be called and the resultwill bestringified. A toJSON method does not serialize: itreturns thevalue represented by the name/value pair that should beserialized,or undefined if nothing should be serialized. The toJSONmethodwill be passed the key associated with the value, and thiswill be

bound to the object holding the key.For example, this would serialize Dates as ISO

strings.Date.prototype.toJSON = function (key) {function f(n) { // Format integers to have at least two digits.

return n < 10 ? '0' + n : n;}

return this.getUTCFullYear() + '-' +f(this.getUTCMonth() + 1) + '-' +f(this.getUTCDate()) + 'T' +

f(this.getUTCHours()) + ':' +f(this.getUTCMinutes()) + ':' +f(this.getUTCSeconds()) + 'Z';

};

You can provide an optional replacer method. It will bepassed thekey and value of each member, with this bound to the

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 9/29

containingobject. The value that is returned from your method willbeserialized. If your method returns undefined, then themember will

be excluded from the serialization.

If the replacer parameter is an array, then it will be usedtoselect the members to be serialized. It filters the resultssuchthat only members with keys listed in the replacer arrayarestringified.

Values that do not have JSON representations, such as

undefined orfunctions, will not be serialized. Such values in objectswill bedropped; in arrays they will be replaced with null. Youcan usea replacer function to replace those with JSON values.JSON.stringify(undefined) returns undefined.

The optional space parameter produces a stringificationof thevalue that is filled with line breaks and indentation to

make iteasier to read.

If the space parameter is a non-empty string, then thatstring willbe used for indentation. If the space parameter is anumber, thenthe indentation will be that many spaces.

Example:

text = JSON.stringify(['e', {pluribus: 'unum'}]); // text is '["e",{"pluribus":"unum"}]'

text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t'); // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'

text = JSON.stringify([new Date()], function (key, value)

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 10/29

{return this[key] instanceof Date ?'Date(' + this[key] + ')' : value;}); // text is '["Date(---current time---)"]'

JSON.parse(text, reviver)This method parses a JSON text to produce an object orarray.It can throw a SyntaxError exception.

The optional reviver parameter is a function that canfilter andtransform the results. It receives each of the keys andvalues,

and its return value is used instead of the original value.If it returns what it received, then the structure is notmodified.If it returns undefined then the member is deleted.

Example:

 // Parse the text. Values that look like ISO date stringswill // be converted to Date objects.

myData = JSON.parse(text, function (key, value) {var a;if (typeof value === 'string') {a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);if (a) {return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3],+a[4],+a[5], +a[6]));}

}return value;});

myData = JSON.parse('["Date(09/09/2001)"]', function(key, value) {var d;if (typeof value === 'string' &&

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 11/29

value.slice(0, 5) === 'Date(' &&value.slice(-1) === ')') {d = new Date(value.slice(5, -1));if (d) {return d;

}}return value;});

It is expected that these methods will formally becomepart of theJavaScript Programming Language in the Fourth Editionof theECMAScript standard in 2008.

This is a reference implementation. You are free to copy,modify, orredistribute.

This code should be minified before deployment.See http://javascript.crockford.com/jsmin.html

USE YOUR OWN COPY. IT IS EXTREMELYUNWISE TO LOAD CODE FROM SERVERS YOUDO NOT CONTROL.

*/ 

 /*jslint evil: true */ 

 /*global JSON */ 

 /*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\",call,charCodeAt, getUTCDate, getUTCFullYear,getUTCHours, getUTCMinutes,getUTCMonth, getUTCSeconds, hasOwnProperty, join,

lastIndex, length,parse, parseJSON, propertyIsEnumerable, prototype,push, replace, slice,stringify, test, toJSON, toJSONString, toString*/ 

if (!this.JSON) {

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 12/29

 // Create a JSON object only if one does not alreadyexist. We create the // object in a closure to avoid global variables.

JSON = function () {

function f(n) { // Format integers to have at least two digits.return n < 10 ? '0' + n : n;}

Date.prototype.toJSON = function (key) {

return this.getUTCFullYear() + '-' +f(this.getUTCMonth() + 1) + '-' +f(this.getUTCDate()) + 'T' +

f(this.getUTCHours()) + ':' +f(this.getUTCMinutes()) + ':' +f(this.getUTCSeconds()) + 'Z';};

var cx = /[\u0000\u00ad\u0600- \u0604\u070f\u17b4\u17b5 \u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0- \uffff]/g,escapeable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600- \u0604\u070f\u17b4\u17b5

 \u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0- \uffff]/g,gap,indent,meta = { // table of character substitutions'\b': '\\b','\t': '\\t','\n': '\\n','\f': '\\f','\r': '\\r','"' : '\\"',

'\\': '\\\\'},rep;

function quote(string) {

 // If the string contains no control characters, no quotecharacters, and no

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 13/29

 // backslash characters, then we can safely slap somequotes around it. // Otherwise we must also replace the offendingcharacters with safe escape // sequences.

escapeable.lastIndex = 0;return escapeable.test(string) ?'"' + string.replace(escapeable, function (a) {var c = meta[a];if (typeof c === 'string') {return c;}return '\\u' + ('0000' +(+(a.charCodeAt(0))).toString(16)).slice(-4);}) + '"' :

'"' + string + '"';}

function str(key, holder) {

 // Produce a string from holder[key].

var i, // The loop counter.k, // The member key.v, // The member value.

length,mind = gap,partial,value = holder[key];

 // If the value has a toJSON method, call it to obtain areplacement value.

if (value && typeof value === 'object' &&typeof value.toJSON === 'function') {value = value.toJSON(key);

}

 // If we were called with a replacer function, then call thereplacer to // obtain a replacement value.

if (typeof rep === 'function') {value = rep.call(holder, key, value);

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 14/29

}

 // What happens next depends on the value's type.

switch (typeof value) {

case 'string':return quote(value);

case 'number':

 // JSON numbers must be finite. Encode non-finitenumbers as null.

return isFinite(value) ? String(value) : 'null';

case 'boolean':

case 'null':

 // If the value is a boolean or null, convert it to a string.Note: // typeof null does not produce 'null'. The case isincluded here in // the remote chance that this gets fixed someday.

return String(value);

 // If the type is 'object', we might be dealing with an

object or an array or // null.

case 'object':

 // Due to a specification blunder in ECMAScript, typeof null is 'object', // so watch out for that case.

if (!value) {return 'null';

}

 // Make an array to hold the partial results of stringifyingthis object value.

gap += indent;partial = [];

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 15/29

 // If the object has a dontEnum length property, we'lltreat it as an array.

if (typeof value.length === 'number' &&!(value.propertyIsEnumerable('length'))) {

 // The object is an array. Stringify every element. Usenull as a placeholder // for non-JSON values.

length = value.length;for (i = 0; i < length; i += 1) {partial[i] = str(i, value) || 'null';}

 // Join all of the elements together, separated with

commas, and wrap them in // brackets.

v = partial.length === 0 ? '[]' :gap ? '[\n' + gap +partial.join(',\n' + gap) + '\n' +mind + ']' :'[' + partial.join(',') + ']';gap = mind;return v;}

 // If the replacer is an array, use it to select the membersto be stringified.

if (rep && typeof rep === 'object') {length = rep.length;for (i = 0; i < length; i += 1) {k = rep[i];if (typeof k === 'string') {v = str(k, value, rep);if (v) {

partial.push(quote(k) + (gap ? ': ' : ':') + v);}}}} else {

 // Otherwise, iterate through all of the keys in the object.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 16/29

for (k in value) {if (Object.hasOwnProperty.call(value, k)) {v = str(k, value, rep);if (v) {partial.push(quote(k) + (gap ? ': ' : ':') + v);

}}}}

 // Join all of the member texts together, separated withcommas, // and wrap them in braces.

v = partial.length === 0 ? '{}' :gap ? '{\n' + gap +

partial.join(',\n' + gap) + '\n' +mind + '}' :'{' + partial.join(',') + '}';gap = mind;return v;}} // Return the JSON object containing the stringify andparse methods.

return {

stringify: function (value, replacer, space) {

 // The stringify method takes a value and an optionalreplacer, and an optional // space parameter, and returns a JSON text. The replacercan be a function // that can replace values, or an array of strings that willselect the keys. // A default replacer method can be provided. Use of thespace parameter can // produce text that is more easily readable.

var i;gap = '';indent = '';

 // If the space parameter is a number, make an indentstring containing that // many spaces.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 17/29

 if (typeof space === 'number') {for (i = 0; i < space; i += 1) {indent += ' ';}

 // If the space parameter is a string, it will be used as theindent string.

} else if (typeof space === 'string') {indent = space;}

 // If there is a replacer, it must be a function or an array. // Otherwise, throw an error.

rep = replacer;if (replacer && typeof replacer !== 'function' &&(typeof replacer !== 'object' ||typeof replacer.length !== 'number')) {throw new Error('JSON.stringify');}

 // Make a fake root object containing our value under thekey of ''. // Return the result of stringifying the value.

return str('', {'': value});},

parse: function (text, reviver) {

 // The parse method takes a text and an optional reviverfunction, and returns // a JavaScript value if the text is a valid JSON text.

var j;

function walk(holder, key) {

 // The walk method is used to recursively walk theresulting structure so // that modifications can be made.

var k, v, value = holder[key];if (value && typeof value === 'object') {

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 18/29

for (k in value) {if (Object.hasOwnProperty.call(value, k)) {v = walk(value, k);if (v !== undefined) {value[k] = v;

} else {delete value[k];}}}}return reviver.call(holder, key, value);} // Parsing happens in four stages. In the first stage, wereplace certain // Unicode characters with escape sequences. JavaScript

handles many characters // incorrectly, either silently deleting them, or treatingthem as line endings.

cx.lastIndex = 0;if (cx.test(text)) {text = text.replace(cx, function (a) {return '\\u' + ('0000' +(+(a.charCodeAt(0))).toString(16)).slice(-4);});}

 // In the second stage, we run the text against regularexpressions that look  // for non-JSON patterns. We are especially concernedwith '()' and 'new' // because they can cause invocation, and '=' because itcan cause mutation. // But just to be safe, we want to reject all unexpectedforms.

 // We split the second stage into 4 regexp operations in

order to work around // crippling inefficiencies in IE's and Safari's regexpengines. First we // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we // replace all simple value tokens with ']' characters.Third, we delete all // open brackets that follow a colon or comma or that

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 19/29

begin the text. Finally, // we look to see that the remaining characters are onlywhitespace or ']' or // ',' or ':' or '{' or '}'. If that is so, then the text is safe foreval.

if (/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {

 // In the third stage we use the eval function to compilethe text into a // JavaScript structure. The '{' operator is subject to a

syntactic ambiguity // in JavaScript: it can begin a block or an object literal.We wrap the text // in parens to eliminate the ambiguity.

= eval('(' + text + ')');

 // In the optional fourth stage, we recursively walk thenew structure, passing // each name/value pair to a reviver function for possibletransformation.

return typeof reviver === 'function' ?walk({'': j}, '') : j;}

 // If the text is not JSON parseable, then a SyntaxError isthrown.

throw new SyntaxError('JSON.parse');}};

}();}

 // Augment the basic prototypes if they have not alreadybeen augmented. // These forms are obsolete. It is recommended thatJSON.stringify and // JSON.parse be used instead.

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 20/29

 if (!Object.prototype.toJSONString) {Object.prototype.toJSONString = function (filter) {return JSON.stringify(this, filter);};

Object.prototype.parseJSON = function (filter) {return JSON.parse(this, filter);};}

To run this example open the CreateMessage.htm on the browser and the output on the browserwill look like this:

Array object converted to string by using the toJSONString() function will be displayed in thealert() message as follows:

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 21/29

 

Parsing a message in JavaScript with JSON 

In the previous section of example we have studied how to create message in JSON in JavaScriptand now we will come to know that how we can parse the message in JSON in JavaScript.

We can parse the message with JSON in JavaScript by using the method"String.parseJSON(filter)". It parses the JSON message to an string or object. The parameter"filter" is optional in this method which is used to filter message or transform their results. Thismethod internally uses the JavaScript's method eval() to parse messages.

Here is the full example code for ParseMessageJSON.htm as follows:

ParseMessageJSON.htm 

<html><head><title>Parsing Message using JSON in JavaScript</title><script language="javascript" src="json2.js"></script><script language="javascript" >var students = {

"Maths" : [{ "Name" : "Amit", // First element "Marks" : 67,"age" : 23 },

{"Name" : "Sandeep", // Second element "Marks" : 65,"age" : 21 }

]}

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 22/29

// Printing Maths array values in the alert message var i=0 var arrayObject = new Array();for(i=0;i<students.Maths.length;i++){

arrayObject.push(students.Maths[i].Name);

arrayObject.push(students.Maths[i].Marks);arrayObject.push(students.Maths[i].age);}

alert("Parsing JSON Message Example ");alert(arrayObject.toJSONString().parseJSON());

</script></head><body>Parsing Message using JSON in JavaScript</body></html> 

To run this example we need to have json2.js file included with our ParseMessageJSON.htm 

file. File "json2.js" is as same as in our previous example of "creating message in JavaScriptwith JSON" .

Output:

Run ParseMessageJSON.htm file on your browser. It will generate output on your browser asfollows:

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 23/29

 

JSONObject example in Java 

In the previous section of JSON tutorials you have seen how JSON can be used with JavaScriptto create objects and arrays, you have also studied how to parse and create messages with JSON

in JavaScript. Now in this part you will study how to use JSON in Java.

To have functionality of JSON in java you must have JSON-lib. JSON-lib also requiresfollowing "JAR" files:

1.  commons-lang.jar

2.  commons-beanutils.jar 3.  commons-collections.jar 

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 24/29

4.  commons-logging.jar 5.  ezmorph.jar 6.   json-lib-2.2.2-jdk15.jar 

JSON-lib is a java library for that transforms beans, collections, maps, java arrays and XML to

JSON and then for retransforming them back to beans, collections, maps and others.

In this example we are going to use JSONObject class for creating an object of JSONObject and then we will print these object value. For using JSONObject class we have to importfollowing package "net.sf.json". To add elements in this object we have used put() method.Here is the full example code of FirstJSONJava.java is as follows:

FirstJSONJava.java 

import net.sf.json.JSONObject;

 public class FirstJSONJava

{ public static void main(String args[]){JSONObject object=new JSONObject();object.put("name","Amit Kumar");object.put("Max.Marks",new Integer(100));object.put("Min.Marks",new Double(40));object.put("Scored",new Double(66.67));object.put("nickname","Amit");System.out.println(object);}

}

To run this example you have to follow these few steps as follows:

  Download JSON-lib jar and other supporting Jars   Add these jars to your classpath   create and save FirstJSONJava.java   Compile it and execute ,You will get following output: 

Output:

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 25/29

 

"JSONArray" example in Java In this part of JSON tutorial you will study how to use JSONArray in Java. JSONArray is asequential and ordered way of collection values.It may consists of Boolean, JSONArray,

JSONObject, Number and String or the JSONObject.NULL objects.

To have functionality of JSON in your java program you must have JSON-lib. JSON-lib alsorequires following "JAR" files:

1.  commons-lang.jar

2.  commons-beanutils.jar 

3.  commons-collections.jar 4.  commons-logging.jar 5.  ezmorph.jar 6.   json-lib-2.2.2-jdk15.jar 

JSON-lib is a java library for that transforms beans, collections, maps, java arrays and XML toJSON and then for retransforming them back to beans, collections, maps and others.

In this example we are going to use JSONArray for creating an object of JSONArray and thenwe will print this array object . For using JSONArray class we have to import package"net.sf.json". To add elements in this object we have used add() method. Here is the full

example code of JSONJavaArray.java as follows:

FirstJSONJava.java 

import net.sf.json.JSONArray;

 public class JSONJavaArray{ public static void main(String args[]){JSONArray arrayObj=new JSONArray();arrayObj.add("name :");arrayObj.add("Amit Kumar");arrayObj.add("Max.Marks :");arrayObj.add(new Integer(100));arrayObj.add("Min.Marks");arrayObj.add(new Double(40));arrayObj.add("Scored");arrayObj.add(new Double(66.67));System.out.println(arrayObj);}

}

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 26/29

To run this example you have to follow these few steps as follows:

  Download JSON-lib jar and other supporting jars   Add these jars to your classpath   create and save JSONJavaArray.java   Compile it and execute ,You will get following output: 

Output:

JSON and Servlet example

In the previous section of JSON-Java example you have learned how to create a java class byusing JSON classes. Now in this example we will tell you how to use JSON classes for creatingServlet.

In this example we have created an object of JSONArray and then we have added elements intothis array by using the method add(). To have functionality of JSON in your application youmust have JSON-lib and its supported jar files. These are: commons-lang.jar, commons-

beanutils.jar, commons-collections.jar, commons-logging.jar, ezmorph.jar and json-lib-

2.2.2-jdk15.jar.

Here is the example code of JSONServlet.java as follows:

JSONServlet.java 

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;import net.sf.json.JSONArray;

 public class JSONServlet extends HttpServlet{ public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{JSONArray arrayObj=new JSONArray();

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 27/29

  arrayObj.add("MCA");arrayObj.add("Amit Kumar");arrayObj.add("19-12-1986");arrayObj.add(24);arrayObj.add("Scored");arrayObj.add(new Double(66.67));

PrintWriter out = response.getWriter();out.println(arrayObj);for(int i=0;i<arrayObj.size();i++){

out.println(arrayObj.getString(i));}

}} 

We have to do corresponding servlet mapping into web.xml as given below:

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee" 

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"><servlet>

<servlet-name>JSONServlet</servlet-name><servlet-class>JSONServlet</servlet-class>

</servlet><servlet-mapping>

<servlet-name>JSONServlet</servlet-name><url-pattern>/JSONServlet</url-pattern>

</servlet-mapping></web-app> 

To run this example follow this step by step procedure:

  create a JSONServlet.java class  compile JSONServlet and place it into WEB-INF/classes directory  Download JSONLibraries and place it into Tomcat's lib directory  Start Tomcat Webserver and type

http://localhost:8080/JSON/JSONServlet into browser's address bar you will havefollowing output on your browser.

Output:

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 28/29

 

JSON-JSP example 

In the previous section of JSON-Servlet example you have learned how to create a servlet classby using JSON classes. Now in this example we will tell you how to use JSON to use it into JSPpages.

In this example we have created an object of JSONArray and then we have added elements intothis array by using the method add(). To have functionality of JSON in your application youmust have JSON-lib and its supporting jar files as well. These are: commons-lang.jar,

commons-beanutils.jar, commons-collections.jar, commons-logging.jar, ezmorph.jar and json-lib-2.2.2-jdk15.jar. To get string values of array object we have used getString(index int)

method of JSONArray. It returns string value of that array object's index.

Here is the example code of JSON-JSPExample.jsp as follows:

JSON-JSPExample.jsp 

<%@ page language="java" import="net.sf.json.JSONArray" %>

<%

JSONArray arrayObj=new JSONArray();arrayObj.add("MCA");arrayObj.add("Amit Kumar");arrayObj.add("19-12-1986");arrayObj.add(24);arrayObj.add("Scored");arrayObj.add(new Double(66.67));

%><h2>Array Object is =></h2> <%=arrayObj%><br><hr>

5/15/2018 JSON Tutorial - slidepdf.com

http://slidepdf.com/reader/full/json-tutorial-55ab4e85ef4c3 29/29

<% for(int i=0;i<arrayObj.size();i++){ %><%=arrayObj.getString(i)%>

<%}

%> 

To run this example follow this step by step procedure:

  create a JSON-JSPExample.jsp file and  place it into WEB-INF directory  Download JSONLibraries and place it into Tomcat's lib directory  Start Tomcat Webserver and type

http://localhost:8080/JSON/JSON-JSPExample.jsp into browser's address bar youwill have following output on your browser.

Output: