JSON vs XML

Instructor: Hafiz Ali

 Acknowledgement
Slides/information used in the lecture notes of this course come from or are adapted from the following
sources:

Krishna Priya
Learning goals
• What is JSON?
• Why JSON needed?
• JSON syntax rules
• JSON key-value pair
• JSON objects and arrays
JavaScript Object Notation (JSON)

1) JSON (JavaScript Object Notation) is a lightweight

data-interchange format.
2) JSON is a syntax for storing and exchanging data.
3) JSON is an easier-to-use alternative to XML.
4) It is based on a subset of the JavaScript
Programming Language
JavaScript Object Notation (JSON)

5) JSON is a text format that is completely language

independent but uses conventions that are familiar to
programmers of the C-family of languages, including
C, C++, C#, Java, JavaScript, Perl, Python, and many
others.
6) A JSON filetype is .json.
7) The JSON format was originally specified by
Douglas Crockford,
 Need of JSON
Standard Structure: As we have seen so far that JSON objects are
having a standard structure that makes developers job easy to read and
write code, because they know what to expect from JSON.
Light weight: Date loaded
quickly and asynchronously without requesting the page re-load. Since
JSON is light weighted, it becomes easier to get and load the requested
data quickly.
Scalable: JSON is language independent, which means it can work well
with most of the modern programming language. Let’s say if we need to
change the server side language, in that case it would be easier for us to
go ahead with that change as JSON structure is same for all the
languages.
 JSON VS XML:
In the formatting of transferring data, JSON is
similar to XML but lighter in weight. Moreover
each value in XML requires the opening and
closing tag, where as in JSON just requires the
value.
JSON data is sent to server in a palin text format,
there is no need to set content-type header in
JSON data.
 JSON vs XML
JSON is lightweight thus simple to XML is less simple than JSON.
read and write. XML doesn't support array data
JSON supports array data structure. structure.
JSON files are more human readable. XML files are less human readable.
JSON has no display capabilities . XML provides the capability to display
Provides scalar data types and the data because it is a markup language.
ability to express structured data Does not provide any notion of data
through arrays and objects. types. One must rely on XML Schema
Native object support. for adding type information.
Objects have to be expressed by
conventions, often through a mixed
use of attributes and elements.

Similarities between JSON and XML

Both are simple and open.
Both supports Unicode. So internationalization is supported by JSON and XML both.
Both represents self describing data.
Both are interoperable or language-independent.
 JSON vs XML
JSON Style: XML Style:
{ <students>
“Students”: [ <student>
{ <name>John</name><age>23</age>
“name”: “John”,
“age”:”23”,
<city>Agra</city>
“city”:”Agra” </student>
}, <student>
{ <name>Steve</name><age>28</age>
“name”: ”Steve”, <city>Delhi</city>
“age”:”28”, </student>
“city”:”Delhi” <student>
},
{
<name>Peter</name><age>32</age>
“name”: ”Peter”, <city>Chennai</city>
“age”:”32”, </student>
“city”:”Chennai” <student>
}, <name>Chaitanya</name><age>28</age>
{ <city>Bangalore</city>
“name”: ”Chaitanya”, </student>
“age”:”28”,
“city”:”Bangalore”
</students>
}
]
}
 JSON syntax
Data is represented in name/value pairs.

Curly braces hold objects and each name is followed by ':'(colon), the name/value pairs are separated by ,
(comma).

Square brackets hold arrays and values are separated by ,(comma).

Below is a simple example −
{
"book": [

{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt",
},

{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy",
} ] }
 JSON data structure

JSON supports the following two data structures:

(1) Collection of name/value pairs − This Data
Structure is supported by different programming
languages.
(1) Ordered list of values − It includes array, list,
vector or sequence etc.
 Data Types
• Number - It can be real number, integer or a floating
number
• String – It can be any text or Unicode double-quoted
with backslash escapement
• Boolean – The Boolean data type represents the true or
false value
• Null – The Null value represents that the associated
variable doesn't have any value
• Object – it is collection of key-value pairs separated by
comma and enclosed in curly brackets
• Array – it is an ordered sequence of values separated
Data Types…
Data Types…
Data Types…
Data Types…
 JSON strings in double quotes
A string value must always be surrounded in
A value can be a string in double quotes.
double quotes, or a number, or { "animal" : "cat" }
This is not valid JSON
true or false or null, or an {'title': 'This is my title.',
'body': 'This is the body.'
object or an array. These }
This code won’t work
structures can be nested. {"promo": "Say "Bob's the best!" at checkout for free
8oz bag of kibble."
}
Using a backslash character to escape quotes inside of
strings fixes the problem
{
"promo": "Say \"Bob's the best!\" at checkout for free
8oz bag of kibble."
}
 JSON Object Syntax Rule

• A collection of name/value pairs. In various languages, this is realized as an object,

record, struct, dictionary, hash table, keyed list, or associative array.

• An object begins with {(left brace) and ends with }(right brace). Each name is followed
by :(colon) and the name/value pairs are separated by ,(comma).

• The string value must be enclosed within double quote " ".

• The number value will be simply written.

• The Boolean values will be simple written as true or false.

• JSON supports numbers in double precision floating-point format digit, fraction and
exponent
 JSON Object

To access the information stored in json, we can

simply refer to the name of the property we need.
document.write('Jason is ' jason.age); // Output:
Jason is 28

document.write('Jason is a ' jason.hometown); //

− JSON Object Example - 1: Output: Jason is Hyderabad
The "{" curly brace represents the JSON object.

{''student'':{
"firstName" : "json",
"hometown" : "Hyderabad",
"age" : "28"
}}
 JSON Array
An ordered list of values. In most languages, this
is realized as an array, vector, list, or sequence.
An array is an ordered collection of values. An
array begins with [(left bracket) and ends with ]
(right bracket). Values are separated by ,
(comma).

• JSON array represents ordered list of values.

• JSON array can store similar type of multiple values.
• It can store string, number, Boolean or object in JSON array.
• The"["(square bracket) represents the JSON array.
• In JSON array, values must be separated by comma. (,)
• A JSON array can have values and objects.
 JSON Array Example
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
"Saturday"]
[24,21,23,56,21,65,105] To access this information, we need to
enclosing multiple objects in square access the array index of the person we
brackets,which signifies an array wish to access. For example, we would
var student = [ { use the following snippet to access info
"firstName" : "json", stored in student:
"hometown" : "Hyderabad",
"age" : "23"
},
document.write(student[1].firstname); // Output: xml
{ document.write(student[0].hometown); // Output:
"firstName" : "xml", Hyderabad
"hometown" : "Secunderabad",
"age" : "24"
}
];
 JSON Number Data Type
A number in JSON can be an integer, decimal, negative number, or an exponent.
{
"widgetInventory": 289,
"sadSavingsAccount": 22.59,
"seattleLatitude": 47.606209,
"seattleLongitude": -122.332071,
"earthsMass": 5.97219e+24
}
The JSON Boolean Data Type:
{
"toastWithBreakfast": false,
"breadWithLunch": true
}
The JSON Null Data Type:
{
"freckleCount": 1,
"hairy": false,
"watchColor": null
}
 JSON Objects
JSON examples
{"firstName":"John", "lastName":"Doe"}

JSON Arrays
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
]
In the example above, the object "employees" is an array containing three objects. Each object is a
record of a person (with a first name and a last name).

JSON Uses JavaScript Syntax

With JavaScript you can create an array of objects and assign data to it, like this:

var employees = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];
The first entry in the JavaScript object array can be accessed like this:
Example
// returns John Doe
employees[0].firstName + " " + employees[0].lastName;
 JSON examples
{
"persons": [
{
"firstName": "Munsub", {
"LastName": "Ali", "firstName": "Anser",
"Age": 26, "LastName": "Ali",
"Address": "Binghamtom, NY USA", "Age": 28,
"PhoneNo": "1234-567-891011", "Address": "Greenville, PA USA",
"id": 1 "PhoneNo": "1234-567-891012",
}, "id": 3
{ }
"firstName": "Noor", ]
"LastName": "ulHaq", }
"Age": 40,
"Address": "Philadelphia, PA USA",
"PhoneNo": "1234-567-891013",
"id": 2
},
 References
1. https://restfulapi.net/json-data-types/
THANK YOU