JSON & XML

Web Technology : 2021

Asst. Prof. Manop Phankokkruad, Ph.D.
Faculty of Information Technology
King Mongkut’s Institute of Technology Ladkrabang
 Outline

❑ JavaScript Object Notation

MP.WEBTECH.IT.KMITL

▪ Syntax
▪ Data types
▪ Schema
❑ eXtensible Markup Language
▪ Structure & Syntax
▪ XML and JSON
 Introduction

❑ XML and JSON are the two most common formats

MP.WEBTECH.IT.KMITL

for data interchange in the Web today.

❑ Although their purposes are not identical, they are
frequently used to accomplish the same task, which
is data interchange.
❑ Both have well-documented open standards on
the Web (JSON : RFC 7159, XML : RFC 4825), and
both are human and machine-readable. Neither
one is absolutely superior to the other, as each is
better suited for different use cases.
 What is the JSON?

JSON (JavaScript Object Notation) is a lightweight

1
MP.WEBTECH.IT.KMITL

data-interchange format. It is easy for humans to read

and write. It is easy for machines to parse and
generate. It is based on a subset of the JavaScript
Programming Language, ECMA-262 3rd Edition.
❑ JSON is a text format that is completely language
independent.
❑ JSON is built on two structures:
▪ A collection of name/value pairs.
▪ An ordered list of values.
 Uses of JSON

❑ It is used while writing JavaScript based

MP.WEBTECH.IT.KMITL

applications that includes browser extensions and

websites.
❑ JSON format is used for serializing and
transmitting structured data over network
connection.
❑ It is primarily used to transmit data between a
server and web applications.
❑ Web services and APIs use JSON format to provide
public data.
❑ It can be used with modern programming
languages.
 JSON - Syntax

JSON syntax is basically considered as a subset of

2
MP.WEBTECH.IT.KMITL

JavaScript syntax; it includes the following:

{
▪Data is represented in "book": [
{
name/value pairs. "id":"01",
▪Curly braces hold objects and "language": "Java",
"edition": "third",
each name is followed by : (colon), "author": "Herbert Schildt"
},
the name/value pairs are {
"id":"07",
separated by , (comma). "language": "C++",
▪ Square brackets hold arrays and "edition": "second“,
"author": "E.Balagurusamy"
values are separated by , }]
}
(comma).
 JSON : Data Types

❑ JSON format supports the following data types:

3
MP.WEBTECH.IT.KMITL

Type Description

Number double- precision floating-point format in JavaScript

String double-quoted Unicode with backslash escaping
Boolean true or false
Array an ordered sequence of values
Value it can be a string, a number, true or false, null etc
Object an unordered collection of key:value pairs
Whitespace can be used between any pair of tokens
null empty
 JSON : object

An object is an unordered set of name/value pairs. An

MP.WEBTECH.IT.KMITL

object begins with { and ends with }. Each name is

followed by : and the name/value pairs are separated
by , . In a JSON object the name(key) must be unique.

Example of a JSON object:

{ "name": "John Doe",
"age": 30,
"married": true
}
 JSON : object

Example of a simple JSON object:

MP.WEBTECH.IT.KMITL
 JSON : array

An array is an ordered collection of values. An array

MP.WEBTECH.IT.KMITL

begins with [ and ends with ] . Values are separated

by , .

Example of Object with a nested Array

{ "name": "John Doe",
"age": 30,
"married": true,
"siblings": ["John", "Mary", "Pat"]
}
 JSON : array

Syntax
MP.WEBTECH.IT.KMITL

[ value0, value1, value2, ......, value n]

Example
{
"books": [
{ "language":"Java" , "edition":"second" }, 0
{ "language":"C++" , "lastName":"fifth" }, 1
{ "language":"C" , "lastName":"third" } 2
]
}
 JSON : array

Example of Object that contains another Object

MP.WEBTECH.IT.KMITL

Object

Array

Object
 JSON : array of object

Each item in an array may be any of the seven JSON

MP.WEBTECH.IT.KMITL

values(as described in the next slide).

Example of a JSON array of object

{
The array contains 3 items. The first
"name": "John Doe",
item is an object, the second item is a
"age": 30,
boolean, and the third item is a
"married": true,
string.
"siblings": [
{"name": "John", "age": 25},
true,
"Hello World"
]
}
 JSON : value

A value can be a string in

MP.WEBTECH.IT.KMITL

double quotes, or a number,

or true or false or null, or an
object or an array. These
structures can be nested.

Syntax
let object-name = { name : value, .......}
Example
let obj = {“price": 500, “product”: ”Shampoo” }
 JSON : string

A string is a sequence of zero or more Unicode

MP.WEBTECH.IT.KMITL

characters, wrapped in double quotes, using

backslash escapes. A character is represented as a
single character string.

Type Description Type Description

\” double quotation \n New line

\\ backslash \r carriage return
\/ forward slash \t horizontal tab
\b backspace four hexadecimal
\u
digits
\f form feed
 JSON : string

Example of a JSON string

MP.WEBTECH.IT.KMITL

{
"name": "John Doe",
"age": 30,
"married": true,
"siblings": ["John", "Mary", "Pat"]
}

Syntax
let json-object-name = { string : "string value", .......}

Example
let obj = {"name": "Amit"}
 JSON : number

A number is very much like a C or Java number,

MP.WEBTECH.IT.KMITL

except that the octal and hexadecimal formats are

not used.

Type Description

Integer Digits 1-9, 0 and positive or negative

Fraction Fractions like .3, .7

Exponent Exponent like e, e+, e-,E, E+, E-

 JSON : number
Syntax
MP.WEBTECH.IT.KMITL

let json-object-name = {"string" : number_value, .......}

Example let obj =

 JSON : boolean

Booleans have the following properties:

MP.WEBTECH.IT.KMITL

▪ Booleans can have a value of only true or false.

▪ The true or false value on the righthand side of the
colon(:) is not surrounded by quotes.
Example of a JSON boolean
 JSON : null

null values have the following characteristics:

MP.WEBTECH.IT.KMITL

▪ Are not surrounded by quotes

Example of a JSON null

 JSON

Example : Convert table to JSON format.

MP.WEBTECH.IT.KMITL

[
Company Contact Country {
Alfreds Futterkiste Maria Anders Germany "company": "Alfreds Futterkiste",
"contact": "Maria Anders",
Centro Francisco
Mexico "country": "Germany"
commercial Chang
},
Ernst Handel Roland Mendel Austria {
"company": "Centro Commercial",
"contact": "Francisco Chang",
"country": "Mexico"
Company Contact Country },
Alfreds Futterkiste Maria Anders Germany {
"company": "Ernst Handel",
{ "contact": "Roland Mendel",
"company": "Alfreds Futterkiste", "country": "Austria"
"contact": "Maria Anders", }
"country": "Germany" ]
}
 JSON Schema

❑ JSON Schema is a specification for JSON based

4
MP.WEBTECH.IT.KMITL

format for defining the structure of JSON data. It

was written under IETF draft.
❑ JSON Schema :
▪ Describes your existing data format.
▪ Clear, human- and machine-readable
documentation.
▪ Complete structural validation, useful for
automated testing.
▪ Complete structural validation, validating client-
submitted data.
 JSON Schema

JSON Schema Example

MP.WEBTECH.IT.KMITL

{ JSON
"firstName": "John",
"lastName": "Doe",
"age": 21
}

{ JSON Schema
"$id": "https://example.com/person.schema.json",
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Person",
"type": "object",
"properties": {
"firstName": {
"type": "string",
"description": "The person's first name."
},
 JSON Schema

JSON Schema Example (cont.)

MP.WEBTECH.IT.KMITL

"lastName": { JSON Schema

"type": "string",
"description": "The person's last name."
},
"age": {
"description": "Age in years which must be equal to or greater than zero.",
"type": "integer",
"minimum": 0
} }
}

JSON Schema validator http://json-schema-validator.herokuapp.com/index.jsp

 JSON and JavaScript

The JSON format is syntactically identical to the code

MP.WEBTECH.IT.KMITL

for creating JavaScript objects. Because of this

similarity, a JavaScript program can easily convert
JSON data into native JavaScript objects.
JSON data is normally accessed in JavaScript through
dot notation.

let person = { "name":“Brad", "age":31, “address":{“city”:“Boston“} };

document.write( person.name ); // Brad
document.write( person.address.city ); // Boston
document.write( person["name"] ); // Brad
 Functions for Working with JSON

The JSON.stringify() function converts an object to a

MP.WEBTECH.IT.KMITL

JSON string.

var obj = {"first_name" : "Sammy", "last_name" : "Shark",

"location" : "Ocean"};
let s = JSON.stringify(obj);

We’ll have the JSON available to us as a

string rather than an object.
'{"first_name" : "Sammy", "last_name" : "Shark", "location" :
"Ocean"}'
 Functions for Working with JSON

The JSON.parse() method parses a JSON string,

MP.WEBTECH.IT.KMITL

constructing the JavaScript value or object.

<script>
let s = '{"firstname" : "Sammy", "lastname" : "Shark", "location" :
"Ocean"}’; String

let obj = JSON.parse(s);

document.write(“Name: " + obj.firstname + “ " +obj.lastname +

"<br>");
Document.write("Location: " + obj.location );
</script>
 What is XML ?

5
MP.WEBTECH.IT.KMITL

eXtensible Markup Language(XML) is set of rules for

defining and representing data as structured
documents for applications on the Internet.
❑ XML is a restricted form of SGML (Standard
Generalized Markup Language).
❑ XML is designed to describe data.
❑ XML is compatible with major Internet
transmission protocols and is also highly
compressible for faster transmission.
❑ Almost all major software vendors fully support the
general XML standard.
 What is XML ?

❑ The XML standard is designed to be independent

MP.WEBTECH.IT.KMITL

of vendor, operating system, source application,

destination application, database, and transport
protocol.
❑ XML Tags are added to the document to provide
the extra information.
❑ XML tags are not predefined unlike HTML.
❑ XML tags give a reader some idea what some of
the data means.
❑ There are 3 main components for XML content:
XML, DTD and XML Schema define rules to describe
data.
 Advantages of Using XML

❑ XML is text (Unicode) based.

MP.WEBTECH.IT.KMITL

▪ Takes up less space.

▪ Can be transmitted efficiently.
▪ Easily readable by human users
❑ One XML document can be displayed differently in
different media.
❑ XML documents can be modularized. Parts can be
reused.
❑ Very flexible and customizable (no finite tag set)
❑ Easy to convert into other representations (XML
transformation languages)
 XML Structure

▪ Document Prolog comes at the top of the

6
MP.WEBTECH.IT.KMITL

document. This section contains XML declaration

and Document type declaration.
▪ Document Elements are the building blocks of
XML.
<?xml version="1.0"?>
<root>
<element1>X</element1>
<element2 type="string">Y</element2>
<element3 type="integer"
value="9.3">Z</element3>
</root>
Document Elements
Document Prolog
 XML – Syntax

A diagram depicts the syntax rules to write different

MP.WEBTECH.IT.KMITL

types of markup and text in an XML document.

1. XML Declaration
2. Tags and Elements XML
Declaration References
3. XML Attributes
4. XML References
Syntax
5. XML Text Rules
Tag &
Elements Text

Attributes
 XML Declaration

The XML document can optionally have an XML

MP.WEBTECH.IT.KMITL

declaration. It is written as follows:

<?xml version="1.0" encoding="UTF-8"?>
Syntax Rules for XML Declaration
▪The XML declaration is case sensitive and must begin
with <?xml> where xml is written in lower-case.
▪It strictly needs to be the first statement of the XML
document.
▪The XML declaration strictly needs be the first
statement in the XML document.
 Tags and Elements

An XML file is structured by several XML-elements, also

MP.WEBTECH.IT.KMITL

called XML-nodes or XML-tags. The names of XML-

elements are enclosed in triangular brackets “< >” .

Syntax Rules for Tags and Elements

▪Element Syntax: Each XML-element needs to be
closed either with start or with end elements.

<element> … </element>

▪Nesting of Elements: An XML-element can contain

multiple XML-elements as its children, but the
children elements must not overlap.
 Tags and Elements

Root Element: An XML document can have only one

MP.WEBTECH.IT.KMITL

root element.
<root>
<x>...</x>
<y>...</y>
</root>

Case Sensitivity: The names of XML-elements are

case-sensitive. That means the name of the start and
the end elements need to be exactly in the same
case.
For example, <contact-info> is different from
<Contact-Info>.
 XML Attributes

An attribute specifies a single property for the

MP.WEBTECH.IT.KMITL

element, using a name/value pair. An XML element

can have one or more attributes.

<person gender="female"> ... </person>

Syntax Rules for XML Attributes

▪ Attribute names in XML are case sensitive.
▪ Same attribute cannot have two values in a syntax.
▪ Attribute names are defined without quotation
marks, whereas attribute values must always appear
in quotation marks.
 XML References

References usually allow you to include additional

MP.WEBTECH.IT.KMITL

text or markup in an XML document. References

always begin with the symbol "&" which is a reserved
character and end with the symbol ";".
▪ Entity References: An entity reference contains a
name between the start and the end delimiters
such as &amp; .
▪ Character References: These contain references,
such as &#65;. In this case, 65 refers to alphabet
"A".

<gangster name="George &quot;Shotgun&quot; Ziegler">

 XML Text

❑ The names of XML-elements and XML-attributes

MP.WEBTECH.IT.KMITL

are case-sensitive. To avoid character encoding

problems, all XML files should be saved as Unicode
UTF-8 or UTF-16 files.
❑ Whitespace characters like blanks, tabs and line-
breaks between XML-elements and between the
XML-attributes will be ignored.
❑ Some characters are reserved by the XML syntax
itself. To use them, some replacement-entities are
used.
 Building Blocks of XML

❑ Elements (Tags) are the primary components of

MP.WEBTECH.IT.KMITL

XML documents. <?xml version=“1.0”/>

Element author with <author id = “0123”>
Attribute id <fname>Manop</fname>
Element fname nested <lname>Phankokkruad</lname>
inside element author. <phone>212-346-1234</phone>
</author>
<!-- comment -->

❑ Attributes provide additional information about

Elements. Values of the Attributes are set inside the
Elements .
❑ Comments start with <!-- and end with -->.
 Validity

An XML document with correct syntax is called well-

MP.WEBTECH.IT.KMITL

formed document.
▪ XML documents must have a root element
▪ XML elements must have a closing tag
▪ XML tags are case sensitive
▪ XML elements must be properly nested
▪ XML attribute values must be quoted
 XML and JSON

JSON and XML are human readable formats and are

7
MP.WEBTECH.IT.KMITL

language independent. They both have support for

creation, reading and decoding in real world
situations.
❑ Verbose : XML is more verbose than JSON, so it is
faster to write JSON for programmers.
❑ Arrays Usage : XML is used to describe the
structured data, which doesn't include arrays
whereas JSON include arrays.
❑ Parsing : JavaScript’s eval method parses JSON.
When applied to JSON, eval returns the described
object.
 XML and JSON

The below XML and JSON document contains data

MP.WEBTECH.IT.KMITL

about a book: its title, authors, date of publication,

and publisher.
{
"Book":
{
"Title": "Parsing Techniques",
"Authors": [ "Dick Grune", "Ceriel J.H. Jacobs" ],
"Date": "2007",
"Publisher": "Springer" <Book>
} <Title>Parsing Techniques</Title>
} <Authors>
<Author>Dick Grune</Author>
<Author>Ceriel J.H. Jacobs</Author>
</Authors>
<Date>2007</Date>
<Publisher>Springer</Publisher>
</Book>
 XML and JSON

❑ Both JSON and XML can be used to receive data

MP.WEBTECH.IT.KMITL

from a web server.

❑ XML is much more difficult to parse than JSON.
❑ JSON is parsed into a ready-to-use JavaScript
object.
XML JSON
▪ self describing (human readable) • doesn't use end tag

▪ hierarchical (values within values) • write shorter

▪ be parsed and used by lots of • quicker to read and write

programming languages
▪ be fetched with an XMLHttpRequest • can use arrays
 More Information
❑ Introducing JSON
MP.WEBTECH.IT.KMITL

https://https://www.json.org
❑ What is JSON?
https://www.w3schools.com/js/js_json_intro.asp
❑ JSON - Introduction
https://www.w3schools.com/js/js_json_intro.asp
❑ JSON Tutorial
https://www.tutorialspoint.com/json/index.htm
❑ JavaScript Tutorial
https://www.w3schools.com/js/default.asp
❑ XML DOM Tutorial
https://www.w3schools.com/xml/dom_intro.asp
❑ XML DOM Tutorial
https://www.tutorialspoint.com/dom/