In this chapter, we are going to assist novices in understanding the basic functionality of the JSON data format. JSON is the abbreviation for ‘JavaScript Object Notation’ which is designed to exchange data as a standard format. It is a simple text-based and lightweight data standard, which is intended for the human readable data exchange. Douglas Crockford is the person who specified the JSON format for the very first time. When JSON is used on the internet, then it is declared with the media type as ‘application/json’. JSON data filename has an extension as .json. JSON data format can be used with multiple programming languages such as JavaScript, C, C++, PHP, Python, PERL, Ruby, Java/J2EE, etc.
In this tutorial, it is expected that the JSON’s novices possess an elementary knowledge on how the web applications work over the HTTP protocol along with the knowledge of JavaScript.
Key Points to remember for JSON
• JSON is the abbreviation for ‘JavaScript Object Notation’
• The JSON format was stated by Douglas Crockford.
• JSON data filename has an extension as .json.
• The Internet Media type for JSON is application/json.
• It is a human-readable data interchange.
• It is an extension to the JavaScript scripting language.
• The public.json is the Uniform Type Identifier.
Applications of JSON data format
• JSON data format is widely used in the programming for browser extensions and websites which are written in the JavaScript language.
• JSON data format is another data format (after XML) which can be used to transmit the structured data between a client and server in the web applications.
• JSON data format is frequently used in the serialization and transmission of the structured data over the network.
• JSON data format is used in the programming of Web services and APIs in order to provide public data.
• It is a language independent data format which widens the scope of its use with the other programming languages.
Characteristics of JSON data format
• The JSON data format is very simple to read and write.
• It is a simple text-based and lightweight data interchange format.
• JSON data format is language independent and can be used with multiple programming languages such as JavaScript, C, C++, PHP, Python, PERL, Ruby, Java/J2EE, etc.
A Simple Example on JSON data format
The following is a very simple example to demonstrate the JSON data format, which can be used to store information related to students and the courses they are taking in a university.
{
"student": [
{
"rollnum": "01",
"subject": "Java Programming",
"name": "Mohit Singh",
"course": "BTech",
"university": "International University"
},
{
"rollnum": "02",
"subject": ".Net Programming",
"name": "Payal Sharma",
"course": "BTech",
"university": "International University"
},
{
"rollnum": "03",
"subject": "Python Programming",
"name": "Aparajita Jain",
"course": "MTech",
"university": "International University"
},
{
"rollnum": "04",
"subject": "Pearl Programming",
"name": "Rohan San",
"course": "MSc.",
"university": "International University"
},
{
"rollnum": "05",
"subject": "C++ Programming",
"name": "Viraat Sehgal",
"course": "MSc.",
"university": "International University"
}
]
}
Shown above is a simple JSON format. Lets use this format in the static HTML (json-demo.html) to demonstrate how simple it is to use.
<html>
<head>
<title>JSON example</title>
<script language = "javascript" >
var json1 = {
"rollnum": "01",
"subject": "Java Programming",
"name": "Mohit Singh",
"course": "BTech",
"university": "International University" };
document.write ("<h3>JSON Demo example 1</h3>");
document.write ("<hr>");
document.write ("<p>Name = " + json1.name+"</p>");
document.write ("<p>Subject = " + json1.subject+"</p>");
document.write ("<p>Roll Number = " + json1.rollnum+"</p>");
document.write ("<p>Course = " + json1.course+"</p>");
document.write ("<p>University = " + json1.university+"</p>");
var json2 = {
"rollnum": "02",
"subject": ".Net Programming",
"name": "Payal Sharma",
"course": "BTech",
"university": "International University" };
document.write ("<h3>JSON Demo example 2</h3>");
document.write ("<hr>");
document.write ("<p>Name = " + json2.name+"</p>");
document.write ("<p>Subject = " + json2.subject+"</p>");
document.write ("<p>Roll Number = " + json2.rollnum+"</p>");
document.write ("<p>Course = " + json2.course+"</p>");
document.write ("<p>University = " + json2.university+"</p>");
var json3 = {
"rollnum": "03",
"subject": "Python Programming",
"name": "Aparajita Jain",
"course": "MTech",
"university": "International University" };
document.write ("<h3>JSON Demo example 3</h3>");
document.write ("<hr>");
document.write ("<p>Name = " + json3.name+"</p>");
document.write ("<p>Subject = " + json3.subject+"</p>");
document.write ("<p>Roll Number = " + json3.rollnum+"</p>");
document.write ("<p>Course = " + json3.course+"</p>");
document.write ("<p>University = " + json3.university+"</p>");
var json4 = {
"rollnum": "04",
"subject": "Pearl Programming",
"name": "Rohan San",
"course": "MSc.",
"university": "International University" };
document.write ("<h3>JSON Demo example 4</h3>");
document.write ("<hr>");
document.write ("<p>Name = " + json4.name+"</p>");
document.write ("<p>Subject = " + json4.subject+"</p>");
document.write ("<p>Roll Number = " + json4.rollnum+"</p>");
document.write ("<p>Course = " + json4.course+"</p>");
document.write ("<p>University = " + json4.university+"</p>");
var json5 = {
"rollnum": "05",
"subject": "C++ Programming",
"name": "Viraat Sehgal",
"course": "MSc.",
"university": "International University" };
document.write ("<h3>JSON Demo example 5</h3>");
document.write ("<hr>");
document.write ("<p>Name = " + json5.name+"</p>");
document.write ("<p>Subject = " + json5.subject+"</p>");
document.write ("<p>Roll Number = " + jso5.rollnum+"</p>");
document.write ("<p>Course = " + json5.course+"</p>");
document.write ("<p>University = " + json5.university+"</p>");
</script>
</head>
<body>
</body>
</html>
Output: –
When we will execute the above HTML code in any browser, then we can observe that the JSON data is processed and displayed on the web page as shown below.
Source code for Application of JSON data formart is here: – Learn What is JSON
Conclusion: –
In this chapter, we discussed the characteristics and applications of JSON data format along with its overview and a suitable example.
