JSON Javascript Tutorial
Introduction : Before we begin our journey of JSON, let’s write down a small piece of code .
<html>
<head>
<script language=”javascript”>
var objTest = {
“TestName” : “SCJP 5 Mock Test”,
“Description” : “This has questions for SCJP 5 mock test”,
“Rating” : 4
};
</script>
</head>
</html>
Our first reaction would be “Hey, wait. This is java script code. What is new in this?”. Welcome to the world of JSON.
Have we ever realized that these braces have huge potentials to store massive information under its hood. Here is JSON. JSON (Java Script Object Notation) provides a simple data format for the exchange of information between the browser and server. In other words JSON is light weight data-interchange format. Now you can see from above code that it has the potential to store any data type of information. We can store strings, integer, float, arrays, function or even other objects inside as per our requirement and JSON does not even bother about the type of data.
Objective
The main objective of this tutorial are :
(1) Why JSON
(2) Using JSON?
(3) Accessing data in JSON
(4) Get JSON via AJAX
(5) JSON with other sever side scripts
(6) Future of JSON
Why JSON
(1) Because JSON is easy to write. It is just like creating and accessing class in javascript in object notation
(2) If you like HashTables, you will fall in love with JSON.
(3) JSON is just key : value pairs assigned within an object.
(4) JSON is very fast.
(5) It is easy to understand and can be integrated in any web application very easily.
(6) Better organized data if prepared in well mannered way.
Using JSON and Accessing data in it
Let’s dig further our original example above. We created an object ‘objTest’ and stored some information. Yes, it is just like a class we use in other languages. So, how to access the data inside it?
<html>
<head>
<script language=”javascript”>
var objTest = {
“TestName” : “SCJP 5 Mock Test”,
“Description” : “This has questions for SCJP 5 mock test”,
“Rating” : 4
};
document.write(objTest.TestName); // SCJP 5 Mock Test
document.write(objTest.Description); // This has questions for SCJP 5 mock test
document.write(objTest.Rating); // 4
</script>
</head>
</html>
As you can see from above example that we are getting the data by conventional attribute access mechanism [<object>.<attribute>]. So objTest.TestName will give the TestName’s value. JSON obeys your request and shows you the desired information. Please keep in mind that everything in javascript is an object, so values can be string, integer, float, array, function and as mentioned earlier can be other objects.
Let’s take a complex example to show the JSON capabilities :
<html>
<head>
<script language=”javascript”>
var objTest = { “certification” : [ // certification is an array in objTest.
{ "TestName" : "SCJP 5 mock Test", // 1st element
"Description" : "This has questions for SCJP 5 mock test.",
"Rating" : 4 },
{ "TestName" : "SCJP 6 mock test", // 2nd element
"Description" : "This Test is for Sun Certified Programmer for the Java Platform.",
"Rating" : 4.5 }
], // End of certification array.
“aptitude” : [ // aptitude is second array in objTest.
{ "TestName" : "Aptitude test", // 1st element
"Description" : "This test is based on logical and basic arithmatical reasoning logic.",
"Rating" : 4},
{ "TestName" : "Anaytical Ability", // 2nd element
"Description" : "This test is aimed at testing your Analytical Ability.",
"Rating" : 5 }
] // End of aptitude Array.
} // End of objTest
document.writeln(”Test Name : ” + objTest.certification[0].TestName + ‘<br/> Test Description : ‘ + objTest.certification[0].Description + ‘<br/> Rating : ‘ + objTest.certification[0].Rating);
/*————————————————OUTPUT———————————————————–
Test Name : SCJP 5 mock test
Test Description : This Test is for Sun Certified Programmer for the Java Platform.
Rating : 4.5
———————————————————————————————————————*/
</script>
</head>
</html>
Let’s understand the above example. Here certification is an object that holds two JSON objects that shows the TestName, Description & Rating of 2 certification test. The same applies for aptitude. It also holds two JSON objects and shows TestName, Description & Rating of 2 aptitude test.
There is an another approach to access the JSON object values.
document.write(objTest["TestName"]); // SCJP 5 Mock Test
Accessing JSON via AJAX
We have heard much about the AJAX and some of us are using it extensively in our daily development life. Here we will try to investigate how we can get the JSON from AJAX callback. In this method, we call the predefined function and passes the JSON data to the function as the first argument. This method is very popular while dealing with 3rd party JSON files.
<html>
<head>
<script>
function processJSONData(paramJSON)
{
document.writeln(paramJSON.TestName); // TestName : SCJP 5 Mock Test
document.writeln(paramJSON.Description); // Description : This has questions for SCJP 5 mock test
document.writeln(paramJSON.Rating); // Rating : 4
}
// User requests the service (hosted on same domain or another domain using AJAX) and
// we are sure that we get the results in JSON format only
// Received from the server
var JSONFile = “processJSONData({’TestName’ : ‘SCJP 5 Mock Test’, ‘Description’ : ‘This has questions for SCJP 5 mock test’, ‘Rating’ : 4})”;
eval(JSONFile);
</script>
</head>
</html>
The above example written in javascript. When this script is passed through the eval() method it parses the processJSONData method and shows the desired results.
json_samples (right click over the link and save as target)
JSON with other sever side scripts
Since JSON is java script object notation, so you can use it in your web application that can be in ASP.NET, PHP etc.
Future of JSON
Almost every browser is giving support for JSON and dozens of websites are coming everyday using JSON. Once you start using JSON, you will come to know its true power and what it can offer to a developer.
Hi Vinay,
Could you please update the json_samples2.htm file. Looks like the link is broken.
Thanks!
@Sreekar thanks for pointing out. I have updated the link. It works now.
Vinay,
Your articles are very informative and substantiated with simplified examples. Looking forward for more articles from you.
Thank You Sarika. We appreciate the feedback and these comments keep us motivated to write more.