Parsing
JSON5.8 5.Scherma Data53
7 5.6 Arrays5.5Objects5.4 Types SyntaxOverview
5.2 5.1
Contents OverSylview,labus
Serializing
Sytax,
into Types,
Data
5
JSON
Objects,
Schema,
Unit 5
(5-1) Serializing
JSON
into
JSON,
Parsing
JSON.
5-2 JSON
Fundamentals of Web Technology
5.1 Overview
" JSON stands for JavaScript Object Notation.
an open standard
Using JSON we can store and retrieve data. This text is based on
format.
" It is extended from JavaScript language.
Features of JSON
1. It is text based, lightweight data interchange format.
2. It is language independent.
3. It is easy to read and write.
4. It is easy for nachines to parse and generate.
C, C+t, Java,
5. It uses the conventions that are familiar to the languages like
JavaScript, Perl, Python and so on.
Review Question
1. Explain the features of JSON.
5.2 Syntax
JSON is built on two structures :
object,
1. A collection of name / value pairs. In various languages, this is realized as an
record, struct, dictionary, hash table, keyed list or associative array.
2. An ordered list of values. In most languages, this is realized as an array, vector, list
or sequence.
5.3 Data Types
Data type means type of data. In JSON there are following data types -
1) String: The JSON string can be written in double quotes. For instance
{"name", "Parth"}
2) Number : Number is an integer or floating point. For example -
{marks:95}
pair.
3) Object : Object is enclosed in curly braces. It is written in the form of key value
For example -
{"student":{"name":"Parth".,"age":22}
TECHNICAL PUBLICATIONS- an up-thrust for knowledge
Fndamonalsof Web Technology
5-3
is
4) Array : Array cncloscd in squarc brackct. JSON
values in arrays. The array values arc Thc array namc is
example cncloscd within the squarcfollowed by the
bracket. For
"fruits""Mango" "Banana" "Guava"]
Name
of the Array
array values
5) Boolean : Boolean means true or false. For
{"Pass":true} example
6) Null: The JSON can have null values.
{"status":null}
JSON values can not be one of the
1)F
Function 2) date 3) undefined
following data types -
ReviewQuestion
.
Explain diferent types of data types.
5.4Objects
The JSON object holds the key value pair.
. Each key is represented as a string and the value can be of
any datatype.
The key and value are separated by colon.
Syntax
{string:value,.....
" For example
"Age":38
. Each key value pair is separated by comma.
The object is written within the { }curly brackets.
1JSON object containing value of different data types
"student":
"name": AAA". String value
"roll no": 10, Numeric value
"Indian": true Boolean value
TECHNICAL PUBLICATIONS- an up-thrust for knowledge
Fundamentals of Web Technology 5-4
2) JSON nested object
"student":
"name": "AAA",
"roll no": 10,
"address":
"Street": "ShivajiNagar",
"City": "Pune",
"Pincode": 411005
}
3) Creation of JSON object with JavaScript
store it in some variable. For example
In JavaScript we can write the JSON object and
var stud = {"name":"AAA" "roll no":10, "city"."Pune" };
Here the object named stud is created.
Example
understand how to create JSON object and obtain its value and get it displaye
Let us
follows -
the web browser using JavaScript. The code is as
Test.html
<html>
<head>
<title>JSON DEMO<K/title>
<script language = "javascript" >
"city":"Pune"};
var stud1 = {"name":"AAA", "roll no":10,
document.write("<h3>Data of Student1</h3>");
document.write("<h4>Name:"+stud1.name+"</h4>");
document.write("<h4>roll no: " + stud1.roll no+"</h4";
document.write("<h4>city:" + stud1.city+"</h4>");
"city":"Mumbai"}
var stud2 = { "name":"BBB", "roll no":20,
document.write("<h3>Data of Student2</h3>");
document.write("<h4> Name: "+ stud2.name "</h4>";
document.write("<h4>roll no:"+ stud2.roll no+"</h4>");
document.write"<h4>city :" + stud2.city+"</h4>");
</script>
</head>
<body>
</body>
</html>
TECHNICAL PUBLICATIONS®- an up-thrust for knowiedge
Andlamertals of Web Technology
5-5
JSON
Output
DJSON DEMO
C file:///D/Test.html
Data of Student1
Name : AAA
roll no : 10
city : Pune
Data of Student2
Name : BBB
roll no : 20
city :Mumbai
5.5 Arrays
The JSON array represents the collection of values. It is
denoted within 1. The
elements of the array are separated by comma.
Syntax
| value,...]
Example
<html>
<head>
<title>JSON DEMO</title>
<script language ="javascript" >
var obj = {"Student":[
{"name":"AAA","roll no':10, "city":"Pune"},
{"name":"BBB", "roll no":20, "city":"Mumbai"},
{ "name":"CCC","roll no":30, "city":"Chennai"},
{"näme":"DDD", "roll no":40, "city":"Kolkatta"}
Var i = 0
TECHNICAL PUBLICATIONS- an up-thrust for knowledge
5-6 JSON
Fundamentals of Web Technology
document.writeln("<table border = '2'><tr>"):
for(i = 0;i<obj.Student.length;i+ +)
{
document.writeln("<td> ");
document.writeln("<table border = '1' width = 100 >"):
document.writeln("<tr><td> <b>Name</b></td><td width = 50>"+
obj.Student|i).name+"</td></tr>");
obj.Student[i].roll no
document.writeln("<tr><td> <b>Roll</b></td> <td width = 50>" +
+"</td></tr>"):
document.writeln("<tr><td><b>City</b></td> <td width = 50>" + obj.Student[i].city
+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
</script>
<head>
<body>
</body>
</html>
Output
X
X
JSON DEMO
G file:///D:/Test.html
NamelBBB NamelCCC NameDDD
NamellAAA
Roll 20 Roll 30 Roll 40
Roll 10
City Mumbai|City Chennai|City Kolkatta
City Pune
5.6 Schema
used to validate the structure of JSON
JSON schema is a specification language which is
data types of your JSON file. The
file. This schema describes the content, structure,
integrity of JSON data for different
JSON schema helps to ensure the consistency and
applications.
TECHNICAL PUBLICATIONS-an up-thrust for knowledge
Fostamentalsof Web Technology 5-7
JSON
ofJJSON Schema
Example
Consider asample JSON file as given below -
Step1:
id""123"
"neme": "Parth"
'age':22,
"'address: f
"streetAddress": "301,Swami Kupa",
"city": "Surat"
"state": "Gujrat"
}.
interests": ['sports", "musi"]
Step2: TThe JSON Schema can be given as follows -
ntschema": "http://ljson-schema.org/draft-04/schema#
"type": "object',
"properties":{
"id': {
"type": "string"
}
"name": {
"type": "string"
"age": {
type": "integer"
"interests": {
type": "array',
"items': [
"type': "string"
"type": "string"
'required': [
id',
"name',
'age,
TECHNICAL PUBLICATIONSs- an up-thrust for knowledge
5-8 JSON
Fundametals of Web Technology
"interests"
Explanation
" Since JSON format contains an object, array and
name - value pair elements. Name
as well as validating the
value pairs are used for providing schema processing clements
JSON content.
The important elements of JSON Schema are -
1. $schema The $schema keyword states that this schema is written according
to the draft v4 specification.
2. title This field is used to give a title to your schema.
3. description A little description of the schema.
our JSON data: it
4. type The type keyword defines the first constraint on
has to be a JSON Object.
and
5 properties Defines various keys and their value types, minimum
maximum values to be used in JSON file.
6. required This keeps a list of required properties.
can get the output as
There some online tools available on the internet using which we
JSON schema when a JSON file is submitted as input.
Benefits of JSON Schema:
validating the JSON data against
1) Data validation : The JSON schema is used for
specific rules and constraints.
Improvement in data quality : By enforcing data validation through JSON Schema,
2)
we can significantly improve data quality and
consistency within our applications.
a documentation for the expected
3) Documentation : JSON Schema serves as
structure and constraints of JSON data.
Review Question
ofexample.
1. Explain the concept of JSON schema with the help
5.7 Serializing into JSON
is the process of
Serialization means encoding. In JavaScript, JSON serialization
It makes use of the
converting a JavaScript object into a JSON string.
TECHNICAL PUBLICATIONS- an up-thrust for knowledge
Fdannentals of Web Technology
5-9
JSON
JSON.stringify() method for
serialization.a This
that they can be casily transmitted over
method serializes JavaScript objects so
network or storcd in a filc.
Object
Encoding (serialization)
String
Decoding (de-serialization)
Fig. 5.7.1
IavaScriptcode(test.htm)
<IDOCTYPE html
<html>
<body>
<script>
let obj ={name:""Parth",age:22};
letjson =JSON.stringify(obj);
console.log("Serialized output: "):
Console.logison);
</script>
<body>
</html>
Output
Serialized output:
{"name": "Parth", "age" :22}
. Here, the JSON.stringify) method converts the JavaScript object obj into a JSON
string which logs to the console.
5.8 Parsing JSON
Parsing JSON means analyzing the components of JSON object. The main purpose of
parsing in JSON is that it can exchange the data of JSON object with the web server.
" For parsing JSON uses the parse) method.
Syntax :
JSON,parse(string,function)
Where
String :It contains a string that is written in JSON format. It is a required parameter.
TECHNICAL PUBLICATIONS- an up-thrust for knowledge
Question
Review cachFundamentals
for
Code </script>
</html>
</body>
console.log(obj.name+"
"+obj.age); Example(test.html)
JSON.parse('{"name":"Parth""'age":22}'): <IDOCTYPE
<html>html>
objlet<body>
console.log<script> Function
How 3) 2) 1) Return
Using We
explanation:
separately as On item. is
It
do value
you parsing, have : Web of
JSON.parse ("Parsed It
parse : is
with Console optional Tochnology
This an
we Parthoutput
Parsed is output optional
JSON obj.name
obj.age.and us In method
ECHNICAL can
one above paramcter.
script get
method is
object 22 top ");
name code, Issues returnsparameter
ICATIONS ?
Explain we as
and an
name:"Parth"age":22}. can and 5-
10
age Output objcct
with parse +
is
an the attributes uscd
this corresponding
up-thrust
help to
object. Filter
of of transform
for
knowlodge example. the
object to
thc results.
and given
we The
JSON
can function
access text.
callcd JSON
them
