Unit-3: JSON: (JavaScript Object Notation)

3.1 Concept and Features of JSON

3.2 Similarities and difference among JSON and XML
3.3 JSON objects(with string and Numbers))
3.4 JSON Arrays and their examples :
3.4.1 Array of string, Array of Numbers, Array of Booleans
3.4.2 Array of objects, Multi-Dimensional Arrays
3.4.3 JSON comments

Json
▪ JavaScript Object Notion which is commonly known as JSON is one of the most popular
data transition formats.
▪ The JavaScript Object Notation (JSON) data format enables applications to communicate
over a network, usually through RESTful APIs. REST architecture use for data transfer with
any application and in any format. Before that data transfer using SOAP protocol which
support XML.but XML is very structured files.

▪ All modern languages (e.g., Java, JavaScript, Ruby, C#, PHP, Python, and Groovy) and
platforms provide excellent support for producing (serializing) and consuming
(deserializing) JSON data.
▪ JSON is very simple as it consists of developer-friendly constructs such as Objects, Arrays,
and name/value pairs.
▪ JSON is not limited to Representational State Transfer (REST); it also works with the
following:
o Node.js (which stores project metadata in package.json)
o NoSQL databases such as MongoDB
o Messaging platforms such as Kafka
▪ It is a text-based and lightweight format for data transactions. JSON format was first
computed by Douglas Crockford.
▪ This being a text-based format is easier to read or write by the user and at the same time,
its lightweight property makes it a stress-free alternative for machines to deconstruct or
generate.

By: Dr. Ami Desai pg. 1

▪ It is basically a subset of the JavaScript but JSON, as a text format is totally independent
of any of the programming languages used as almost all the languages, can easily analyze
the text.
▪ Its unique properties like text-based, lightweight, language independence etc. make it an
ideal candidate for the data-interchange operations.
▪ It cannot use for transfer image, video or clip, audio or other binary information using
JSON.
Features of JSON
▪ Easy to use – JSON API offers high-level part, which helps you to simplify commonly used
use-cases.
▪ Performance – JSON is quite fast as it consumes very less memory space, which is
especially suitable for large object graphs or systems.
▪ Free tool – JSON library is open source and free to use.
▪ Doesn’t require to create mapping – JSON API provides default mapping for many
objects to be serialized.
▪ Clean JSON – Creates clean, and compatible JSON result that is easy to read.
▪ Dependency – JSON library does not require any other library for processing.
Example:

Usage of JSON
JSON is mostly used to transfer the data from one system to another. It can transfer data
between two computers, database, programs etc.

▪ It is mainly used for transmitting serialized data over the network connection.
▪ It can be used with all the major programming languages.
▪ It is useful in data transition from the web application to the server.
▪ Most of the web services use JSON based format for data transfer.

Here are the important benefits/ pros of using JSON:

▪ Provide support for all browsers
▪ Easy to read and write
▪ Straightforward syntax
▪ You can natively parse in JavaScript using eval() function

By: Dr. Ami Desai pg. 2

 ▪ Easy to create and manipulate
▪ Supported by all major JavaScript frameworks
▪ Supported by most backend technologies
▪ JSON is recognized natively by JavaScript
▪ It allows you to transmit and serialize structured data using a network connection.
▪ You can use it with modern programming languages.
▪ JSON is text which can be converted to any object of JavaScript and send to the
server.

JSON Object
▪ JSON object is a set of Keys along with its values (“Key”:value) without any specific
order.
▪ The key and their values are grouped using curly braces, both opening and closing “{
}”.
▪ There are certain rules that need to be followed while creating a JSON structure, we
will learn about those rules while discussing the Key value pairs.
var student={“ROLLNO”:9,“NAME”:”RAJ”,”FEES”:8768.87}
▪ So, in order to create a JSON, the first thing we will need is an attribute. Here, we are
creating an “student” JSON object. Next thing we need is to specify the properties of
the object, let’s assume our student have a “Rollno”, ”Name” and “Fees”. These
properties of the employee are represented as “Keys” in the JSON structure.
▪ Here 9,”RAJ”,8768.87 are value of keys which has different types.

Generic Rules to be followed while creating a JSON:

▪ JSON Objects should start and end with braces “{ }”.
▪ Key fields are included in the double quotes.
▪ Values are represented by putting “:” colon between them and the keys.
▪ JSON key-value pairs are separated by a comma “,”.
▪ Values can be of any data type like String, Integer, Boolean etc.

Difference between JSON and XML

JSON (JavaScript Object Notation) XML

JSON is simple and easier to read and write XML is less readable

JSON doesn’t use end tag In XML, the end tag is mandatory

JSON supports array thus it is easy to transfer

a big chunk of homogeneous(same) data XML doesn’t support array
items using JSON

JSON is easier to parse and can be parsed to

XML is difficult to parse than JSON
ready-to-use JavaScript object

JSON is short XML document is lengthy and redundant

By: Dr. Ami Desai pg. 3

JSON is less secure than XML XML is more secured than JSON

JSON file is more readable than XML because XML file is big and filled with user-defined tags,
it is short and to the point. thus less-readable

JSON is data-oriented XML is document-oriented

JSON object has a type XML data is type less

Retrieving value is easy Retrieving value is difficult

Supported by many Ajax toolkit Not fully supported by Ajax toolkit

It supports only UTF-8 encoding. It supports various encoding.

JSON Arrays
▪ Arrays in JSON are similar to the ones that are present in any programming language,
the array in JSON is also an ordered collection of data.
▪ The array starts with a left square bracket “[“and ends with right square bracket “]”.
The values inside the array are separated by a comma.
▪ There are some basic rules that need to be followed if you are going to use an array in
a JSON.
▪ We can store string, number, Boolean, object data in array.
Ex:
▪ JSON array of numbers: It is an ordered list of number values.
Ex: [3,64,62,24]
▪ JSON array of string: It is an ordered list of value with string type. Ex:[“c”,”c++”,”java”]
▪ JSON array of boolean:It is an ordered list of Boolean values.
Ex:[“false”,”true”,”true”,”false”]
▪ JSON array of object:
{ students:[
{“ROLLNO”:9,“NAME”:”RAJ”,”FEES”:8768.87},
{“ROLLNO”:1,“NAME”:”Rina”,”FEES”:8768.87}
{“ROLLNO”:2,“NAME”:”suraj”,”FEES”:8768.87}
]}
• Assign/modify value: arrayname[index].attribute=value
Students[0].NAME=”Raju”
So “Raj” replace by “Raju”
▪ JSON Multidimensional array : It is possible store data array inside another array.
Ex: var students:{“fybca”:[
{“ROLLNO”:9,“NAME”:”RAJ”,”FEES”:8768.87},
{“ROLLNO”:1,“NAME”:”Rina”,”FEES”:8768.87}
{“ROLLNO”:2,“NAME”:”suraj”,”FEES”:8768.87}
],
“Sybca”:[
{“ROLLNO”:90,“NAME”:”RAM”,”FEES”:7777.87},
{“ROLLNO”:18,“NAME”:”Ritu”,”FEES”:9999.87}
{“ROLLNO”:23,“NAME”:”sima”,”FEES”:8768.87}

By: Dr. Ami Desai pg. 4

 ],
}

JSON Comments
▪ JSON doesn't support comments. But as programmers, we are used to add comments
wherever required. We can add using key:value pair.
▪ {“comments”:”this is not required”}
▪ We can add a comment in JSON file included in the JSON object.
Var value = {
“Comment1” : “This is student record”,
_Comment: “This is student record”,
“Name”: "Logan",
“age”: 21,
“Location”: "London"
}
We specify an underscore before comment/in double quote to view it as a comment. But
remember the comment is only a comment in the eyes of the developer but not the
computer.
▪ We can even extract the comment's value from the JSON object.
alert(value._comment);

JSON.parse()
▪ JSON parsing is the process of converting a JSON object in text format (in Quotes) to
a JavaScript object that can be used inside a program.
▪ The JSON.parse() method parses a JSON string, constructing the JavaScript value or
object described by the string.
Example :
<script>
var x = '{"name":"Ram","rno":25}';
var obj = JSON.parse(x);
document.write(obj.name);
</script>
Output : Ram
Example : display data from stud.json file using jquery
Stud.json
[
{"name":"raj","age":34},
{"name":"nila","age":23}
]
Studinfo.html
<html>

By: Dr. Ami Desai pg. 5

 <head>
<script src="jquery-2.2.0.min.js"></script>
</head>
<body>
<table id='table' border=""1">
<!-- HEADING FORMATION -->
<tr>
<th>name</th>
<th>age</th>
</tr>
<script>
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("stud.json",function (data)
// It is a jquery Method to get the JSON data
{
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' +value.name + '</td>';
student += '<td>' +value.age + '</td>';
student += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
</script>
</body>
</html>

By: Dr. Ami Desai pg. 6