Json in Javascript: J S O N J S O N
Json in Javascript: J S O N J S O N
JSON stands for JavaScript Object Notation that is a language independent 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 tutorial we are going to discuss JSON with JavaScript.
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>");
</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
In the previous section of JavaScript-JSON tutorial you have known that how to create an object
and now in this tutorial we have provided you the way array of objects are declared in
JavaScript-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 access
these 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 first
student in Maths and so on.
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 values
var 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>");
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.
Creating Message in JSON with JavaScript
In 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 to
create a message with JSON in JavaScript.
In this example of creating message in JSON with JavaScript we have included "json2.js" file
first. 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 created
by 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 }
]
}
// Printing array elements values
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("Welcome to JSON Message Example ");
alert(arrayObject.toJSONString());
</script>
</head>
<body>
Message creation using JSON in JavaScript
</body>
</html>
/*
json.js
2008-05-25
Public Domain
No warranty expressed or implied. Use at your own risk.
This file has been superceded by http://www.JSON.org/json2.js
See http://www.JSON.org/js.html
This 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 JavaScript value.
It must not contain any cyclical references. Illegal values
will be excluded.
string.parseJSON(filter)
This method parses a JSON text to produce an object or
array. It can throw a SyntaxError exception.
Example:
This file will break programs with improper for..in loops. See
http://yuiblog.com/blog/2006/09/26/for-in-intrigue/
This file creates a global JSON object containing two methods: stringify
and parse.
Example:
text = JSON.stringify(['e', {pluribus: 'unum'}]);
// text is '["e",{"pluribus":"unum"}]'
JSON.parse(text, reviver)
This method parses a JSON text to produce an object or array.
It can throw a SyntaxError exception.
Example:
// Parse the text. Values that look like ISO date strings will
// be converted to Date objects.
/*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) {
// Create a JSON object only if one does not already exist. 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;
}
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) {
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 + '"';
}
case 'number':
case 'boolean':
case 'null':
return String(value);
case 'object':
if (!value) {
return 'null';
}
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || 'null';
}
for (k in value) {
if (Object.hasOwnProperty.call(value, k)) {
v = str(k, value, rep);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
}
}
}
}
return {
stringify: function (value, replacer, space)
{
var i;
gap = '';
indent = '';
rep = replacer;
if (replacer && typeof replacer !==
'function' &&
(typeof replacer !== 'object' ||
typeof replacer.length !== 'number')) {
throw new Error('JSON.stringify');
}
var j;
cx.lastIndex = 0;
if (cx.test(text)) {
text = text.replace(cx, function (a) {
return '\\u' + ('0000' +
(+(a.charCodeAt(0))).toString(16)).slice(-
4);
});
}
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, ''))) {
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 browser will look like this:
Array object converted to string by using the toJSONString() function will
be displayed in the alert() message as follows:
Parsing a message in JavaScript with JSON
In the previous section of example we have studied how to create message in JSON in JavaScript
and 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. This
method internally uses the JavaScript's method eval() to parse messages.
ParseMessageJSON.htm
<html>
<head>
<title>Parsing Message using JSON in
JavaScript</title>
<script language="javascript" src="js
on2.js"></script>
<script language="javascript" >
var students = {
"Maths" : [
{ "Name" : "
Amit", // First element
"Marks" : 6
7,
"age" : 2
3 },
{
"Name"
: "Sandeep", // Second element
"Marks" : 6
5,
"age" : 2
1 }
]
}
// 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().pa
rseJSON());
</script>
</head>
<body>
Parsing Message using JSON in JavaSc
ript
</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 JavaScript
with JSON" .
Output:
Run ParseMessageJSON.htm file on your browser. It will generate output on your browser as
follows:
JSONObject example in Java
In the previous section of JSON tutorials you have seen how JSON can be used with JavaScript
to 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 requires
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 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 import
following 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 a
rgs[]){
JSONObject object=new JSONObject
();
object.put("name","Amit Kumar")
;
object.put("Max.Marks",new Inte
ger(100));
object.put("Min.Marks",new Doub
le(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:
To have functionality of JSON in your java program you must have JSON-lib. JSON-lib also
requires 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 to
JSON 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 then
we 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 a
rgs[]){
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);
}
}
To run this example you have to follow these few steps as follows:
Output:
In this example we have created an object of JSONArray and then we have added elements into
this array by using the method add(). To have functionality of JSON in your application you
must 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.
JSONServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import net.sf.json.JSONArray;
public class JSONServlet extends HttpSer
vlet{
public void doGet(HttpServletRequest re
quest,HttpServletResponse response)
throws ServletException,IOException{
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));
PrintWriter out = response.getWriter(
);
out.println(arrayObj);
for(int i=0;i<arrayObj.size();i++){
out.println(arrayObj.getString(i));
}
}
}
<?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/XMLSch
ema-instance"
xsi:schemaLocation="http://java.sun.com/
xml/ns/javaee
http://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>
Output:
JSON-JSP example
In the previous section of JSON-Servlet example you have learned how to create a servlet class
by using JSON classes. Now in this example we will tell you how to use JSON to use it into JSP
pages.
In this example we have created an object of JSONArray and then we have added elements into
this array by using the method add(). To have functionality of JSON in your application you
must 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.
JSON-JSPExample.jsp
<%@ page language="java" impor
t="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>
<% for(int i=0;i<arrayObj.size();i++){
%>
<%=arrayObj.getString(i)%>
<%
}
%>
Output: