JSON Tutorial Basic to Advance

JSON stand for Java Script Object Notation (JSON).

JSON is not a Programming Language. JSON is a data interchange format.

Using JSON we can transfer data between client and server and server to server.

JSON is defined in RFC4627 written in 2006. Internet Engineering Task Force (IETF) published JSON RFC7159 in March 2014.

Later on standard updated on RFC8259 and EMCA 404

JSON media type(MIME type) is application/json

JSON file extension is <code>.json</code>

In JSON data can be in following structure

A collection of name/value pair
An ordered list of value

These two are the universal data structure supported by approx all programming languages. So data exchange between one language to another is easy by JSON.

JSON string example is as below

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

{

"squadName": "Super hero squad",

"homeTown": "Metro City",

"formed": 2016,

"secretBase": "Super tower",

"active": true,

"members": [

{

"name": "Molecule Man",

"age": 29,

"secretIdentity": "Dan Jukes",

"powers": [

"Radiation resistance",

"Turning tiny",

"Radiation blast"

]

{

"name": "Madame Uppercut",

"age": 39,

"secretIdentity": "Jane Wilson",

"powers": [

"Million tonne punch",

"Damage resistance",

"Superhuman reflexes"

]

{

"name": "Eternal Flame",

"age": 1000000,

"secretIdentity": "Unknown",

"powers": [

"Immortality",

"Heat Immunity",

"Inferno",

"Teleportation",

"Interdimensional travel"

]

}

]

}

Why use JSON?

As JSON format is text only, it can be sent to server and also can received from a server, and also can be used as a data format by any programming language.

If you receive data from a server, in JSON format, you can use it like any other JS object.

JSON Syntax

JSON syntax is derived from JS object notation syntax.

• Data is in name/value pairs

• Curly braces hold objects

• Data is separated by commas

• Square brackets hold arrays

JSON Data

JSON data is written as name or value pairs.

A name or value pair consists of a field name like this “”, and it will follow by a colon, and also followed by a value:

Example

{“name”:”Ayan” }

JSON – Evaluates to JS Objects

The JSON format is a also JavaScript objects.

In JSON, keys must be strings, written with double quotes:

JSON

{ “name”:”Ayan” }

In JSON, keys can be strings, numbers, or identifier names,

{ name:”Ayan” }

JSON with JavaScript Syntax

JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JS.

With JS you can create an object and assign data to it.

Example

Access a JavaScript object

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj, x;
         myObj = { name: "Ayan", age: 25, city: "Mumbai" };
         x = myObj.name;
         document.getElementById("mydemo").innerHTML = x;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj, x;

myObj = { name: "Ayan", age: 25, city: "Mumbai" };

x = myObj.name;

document.getElementById("mydemo").innerHTML = x;

</script>

</body>

</html>

Result

Ayan

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj, x;
         myObj = { name: "Ayan", age: 25, city: "Mumbai" };
         x = myObj["name"];
         document.getElementById("mydemo").innerHTML = x;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj, x;

myObj = { name: "Ayan", age: 25, city: "Mumbai" };

x = myObj["name"];

document.getElementById("mydemo").innerHTML = x;

</script>

</body>

</html>

produce the same output as above

JSON Values

In JSON, values must be one of the following data types:

a string
a number
an object
an array

or one of the following literal names

false
true
null

JSON String Value

String value is represented in quotation any unicode character is used to create string.

” ” //empty string
“Ram” //string value
“\”” // use of escape character
“\uXXXX” // unicode value

JSON Numbers

JSON allows numbers as an integer or a floating point numbers.

Example

25
24.25
3.55
3.1e3

JSON Objects

Values in JSON can be objects. It contains zero or more name value pairs in curly braces seperated by comma

Example

{
“employee”:{ “name”:”Ayan”, “age”:25, “city”:”Mumbai” }
}

JSON Array

JSON Array are surrounded by [ (squrae bracket) and zero or more values or elements are seperated by comma.

The values in array may be of different types.

Example

[“red’,”blue”,”green”, “orange”]

A composite JSON structure is also possible

[
   {
      "name":"Ayan Das",
      "age":25,
      "knowledge":["typing","SEO"]
   },
   {
      "name":"RamBag",
      "age":39,
      "knowledge":["Coding","Web designing"]
   }
]

[

{

"name":"Ayan Das",

"age":25,

"knowledge":["typing","SEO"]

{

"name":"RamBag",

"age":39,

"knowledge":["Coding","Web designing"]

}

]

Here a JSON array contains two objects and each object contains string, number and array values

JSON is purely a data format — it contains only properties, no methods.

JSON need a double quotes to be used around strings and property names. Single quotes are not valid in a JSON.
A single misplaced colon or comma can cause a JSON file to go wrong, and not working that JSON file. Always be careful to validate any data in JSON. A validate JSON using an application like JSONLint.
JSON can be taken the form of any data type that is valid for inside JSON, not just arrays or objects. So, a single string or a number can be a valid JSON object.
Unlike in JavaScript code in which object properties may be unquoted, in JSON, only quoted strings may be used as properties.

Converting between objects and textSection

In JSON can be set the XHR request to convert the JSON response directly into a JS object using:

request.responseType = ‘json’;

But sometimes can be receive a raw JSON string, and need to convert it to an object.

when try to send a JavaScript object across the network, then need to convert it to JSON (a string) before sending.

These two problems are so common that a built-in JSON object is available, which contains the following two methods:

parse(): Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.
stringify(): Accepts an object as a parameter, and returns the equivalent JSON string form.

See one example of stringify()

request.open('GET', requestURL);
<!DOCTYPE html>
<html lang="en">
   <body>
      <script>
         var person = new Object();
         person.name = "Ram";
         person.age = 24;
         person.mailIds = [
             "abc@abc.com","pqr@pqr.com","st@st.com"];
         var JSONtext = JSON.stringify(person);
         document.write(JSONtext);
      </script>
   </body>
</html>

request.open('GET', requestURL);

<!DOCTYPE html>

<body>

var person = new Object();

person.name = "Ram";

person.age = 24;

person.mailIds = [

"[email protected]","[email protected]","[email protected]"];

var JSONtext = JSON.stringify(person);

document.write(JSONtext);

</script>

</body>

</html>

{“name”:”Ram”,”age”:24,”mailIds”:[“[email protected]”,”[email protected]”,”[email protected]”]}

console.table(obj); prints array in tabular format
console.log(obj[0].name); print first objects name
for (var row in obj) will iterate each object and access its properties in name value pair

Example

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var text = '{"employees":[' +
         '{"firstName":"Ram","lastName":"Das" },' +
         '{"firstName":"Sam","lastName":"Ghosh" },' +
         '{"firstName":"Ayan","lastName":"Bag" }]}';
         
         obj = JSON.parse(text);
         document.getElementById("mydemo").innerHTML =
         obj.employees[1].firstName + " " + obj.employees[1].lastName;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var text = '{"employees":[' +

'{"firstName":"Ram","lastName":"Das" },' +

'{"firstName":"Sam","lastName":"Ghosh" },' +

'{"firstName":"Ayan","lastName":"Bag" }]}';

obj = JSON.parse(text);

document.getElementById("mydemo").innerHTML =

obj.employees[1].firstName + " " + obj.employees[1].lastName;

</script>

</body>

</html>

Sam Ghosh

JSON.parse()

A common use of JSON is to exchange data to/from a web server.

parse() is used to convert JSON data to JavaScript values

Server send data as a string. To convert this string to JavaScript object JSON.parse() method is used

Example – Parsing JSON

This text received from a web server:

‘{ “name”:”Ayan”, “age”:25, “city”:”Mumbai”}’

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

varobj = JSON.parse(‘{ “name”:”Ayan”, “age”:25, “city”:”Mumbai”}’);

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

Example

Create Object from JSON String

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var txt = '{"name":"Ayan", "age":25, "city":"Mumbai"}'
         var obj = JSON.parse(txt);
         document.getElementById("mydemo").innerHTML = obj.name + ", " + obj.age;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var txt = '{"name":"Ayan", "age":25, "city":"Mumbai"}'

var obj = JSON.parse(txt);

document.getElementById("mydemo").innerHTML = obj.name + ", " + obj.age;

</script>

</body>

</html>

Ayan, 25

How to access nested JSON objects

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj = {
           "name":"Ayan",
           "age":25,
           "bikes": {
           "bike1":"Honda",
           "bike2":"Bajaj",
           "bike3":"Hero"
           }
         }
         document.getElementById("mydemo").innerHTML += myObj.bikes.bike2 + "<br>";
         //or:
         document.getElementById("mydemo").innerHTML += myObj.bikes["bike2"];
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj = {

"name":"Ayan",

"age":25,

"bikes": {

"bike1":"Honda",

"bike2":"Bajaj",

"bike3":"Hero"

}

document.getElementById("mydemo").innerHTML += myObj.bikes.bike2 + "<br>";

//or:

document.getElementById("mydemo").innerHTML += myObj.bikes["bike2"];

</script>

</body>

</html>

Bajaj Bajaj

JSON Arrays

EXAMPLE

Access an array value of a JSON object

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj, x;
         myObj = {
           "name":"Ayan",
           "age":25,
           "bikes":[ "Honda", "Bajaj", "Hero" ]
         };
         x = myObj.bikes[0];
         document.getElementById("mydemo").innerHTML = x;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj, x;

myObj = {

"name":"Ayan",

"age":25,

"bikes":[ "Honda", "Bajaj", "Hero" ]

};

x = myObj.bikes[0];

document.getElementById("mydemo").innerHTML = x;

</script>

</body>

</html>

Honda

EXAMPLE

Looping through an array using a for in loop

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj, i, x = "";
         myObj = {
           "name":"Ayan",
           "age":25,
           "cars":[ "Honda", "Bajaj", "Hero" ]
         };
         
         for (i in myObj.cars) {
           x += myObj.cars[i] + "<br>";
         }
         document.getElementById("mydemo").innerHTML = x;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj, i, x = "";

myObj = {

"name":"Ayan",

"age":25,

"cars":[ "Honda", "Bajaj", "Hero" ]

};

for (i in myObj.cars) {

x += myObj.cars[i] + "<br>";

}

document.getElementById("mydemo").innerHTML = x;

</script>

</body>

</html>

Honda Bajaj Hero

EXAMPLE

Looping through arrays inside arrays

Nested JSON Objects

<!DOCTYPE html>
<html>
   <body>
      <p id="mydemo"></p>
      <script>
         var myObj, i, j, x = "";
         myObj = {
           "name":"Ayan",
           "age":25,
           "bikes": [
             {"name":"Honda", "models":["Hornet", "xblade", "livo"]},
             {"name":"Bajaj", "models":["pulsar", "neon", "X5"]},
             {"name":"Hero", "models":["500", "Panda"] }
           ]
         }
         for (i in myObj.bikes) {
           x += "<h1>" + myObj.bikes[i].name + "</h1>";
         for (j in myObj.bikes[i].models) {
             x += myObj.bikes[i].models[j] + "<br>";
           }
         }
         document.getElementById("mydemo").innerHTML = x;
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<body>

var myObj, i, j, x = "";

myObj = {

"name":"Ayan",

"age":25,

"bikes": [

{"name":"Honda", "models":["Hornet", "xblade", "livo"]},

{"name":"Bajaj", "models":["pulsar", "neon", "X5"]},

{"name":"Hero", "models":["500", "Panda"] }

]

}

for (i in myObj.bikes) {

x += "<h1>" + myObj.bikes[i].name + "</h1>";

for (j in myObj.bikes[i].models) {

x += myObj.bikes[i].models[j] + "<br>";

}

document.getElementById("mydemo").innerHTML = x;

</script>

</body>

</html>

Honda Hornet xblade livo Bajaj pulsar neon X5 Hero 500 Panda

See one Example to read JSON data and show in console

<!DOCTYPE html>
<html>
<body>
    <script>
    var json = `[{
		"rollno": 12,
		"name": "Ram",
		"section": "A",
		"branch": "CSE"
	},
	{
		"rollno": 14,
		"name": "Mohan",
		"section": "A",
		"branch": "CSE"
	},
	{
		"rollno": 15,
		"name": "Sohan",
		"section": "B",
		"branch": "CSE"
	},
	{
		"rollno": 16,
		"name": "Ramesh",
		"section": "A",
		"branch": "Mech"
	},
	{
		"rollno": 17,
		"name": "Suresh",
		"section": "A",
		"branch": "Mech"
	},
	{
		"rollno": 18,
		"name": "Mahesh",
		"section": "B",
		"branch": "Mech"
	},
	{
		"rollno": 19,
		"name": "Naresh",
		"section": "A",
		"branch": "ET&T"
	}
]`;
    
    var obj = JSON.parse(json);
        console.table(obj);
        console.log(obj[0].name);
       for (var row in obj) {
       console.log(" RollNo "+obj[row].rollno
                   +" Name "+obj[row].name
                   +" Section "+obj[row].section
                   +" Branch "+obj[row].branch);
     }
    
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

var json = `[{

"rollno": 12,

"name": "Ram",

"section": "A",

"branch": "CSE"

{

"rollno": 14,

"name": "Mohan",

"section": "A",

"branch": "CSE"

{

"rollno": 15,

"name": "Sohan",

"section": "B",

"branch": "CSE"

{

"rollno": 16,

"name": "Ramesh",

"section": "A",

"branch": "Mech"

{

"rollno": 17,

"name": "Suresh",

"section": "A",

"branch": "Mech"

{

"rollno": 18,

"name": "Mahesh",

"section": "B",

"branch": "Mech"

{

"rollno": 19,

"name": "Naresh",

"section": "A",

"branch": "ET&T"

}

]`;

var obj = JSON.parse(json);

console.table(obj);

console.log(obj[0].name);

for (var row in obj) {

console.log(" RollNo "+obj[row].rollno

+" Name "+obj[row].name

+" Section "+obj[row].section

+" Branch "+obj[row].branch);

}

</script>

</body>

</html>

Result

Ram
RollNo 12 Name Ram Section A Branch CSE
RollNo 14 Name Mohan Section A Branch CSE
RollNo 15 Name Sohan Section B Branch CSE
RollNo 16 Name Ramesh Section A Branch Mech
RollNo 17 Name Suresh Section A Branch Mech
RollNo 18 Name Mahesh Section B Branch Mech
RollNo 19 Name Naresh Section A Branch ET&amp;T

Ram

RollNo 12 Name Ram Section A Branch CSE

RollNo 14 Name Mohan Section A Branch CSE

RollNo 15 Name Sohan Section B Branch CSE

RollNo 16 Name Ramesh Section A Branch Mech

RollNo 17 Name Suresh Section A Branch Mech

RollNo 18 Name Mahesh Section B Branch Mech

RollNo 19 Name Naresh Section A Branch ET&T

JSON Vs XML

Extensible Markup Language(XML) is a Markup Language.

XML is used to access and transfer the data same like JSON.

XML uses tag to wrap content.

General structure of XML to send send data is as below

<?xml version="1.0" encoding="UTF-8"?>
<students>
   <student>
        <rollno>12</rollno>
       <name>Ram</name>
      <section>CSE</section>
     <branch>A</branch>
 </student>
 <student>
        <rollno>14</rollno>
       <name>Mohan</name>
       <section>CSE</section>
      <branch>A</branch>
 </student>
</students>

<?xml version="1.0" encoding="UTF-8"?>

</student>

<name>Mohan</name>

</student>

</students>

For above data JSON is

[{
 "rollno": 12,
 "name": "Ram",
 "section": "A",
 "branch": "CSE"
 },
 {
 "rollno": 14,
 "name": "Mohan",
 "section": "A",
 "branch": "CSE"
 }]

[{

"rollno": 12,

"name": "Ram",

"section": "A",

"branch": "CSE"

{

"rollno": 14,

"name": "Mohan",

"section": "A",

"branch": "CSE"

}]

XML and JSON both are data interchange format.

In XML we have to add additional tags to carry data that is not is JSON no overhead required to carry data in JSON

JSON is based on JavaScript. XML is derived from SGML.

JSON can use Array and objects to represent and carry data. XML uses markup structure to carry data

JSON uses key value pair and array object that allows direct mapping of data structure of appropriate language.

XML allows namespace to avoid name conflicts this is not available in JSON.

JSON Formatter and Validator

JSON Formatter are used to provide structure way to JSON data.

JSON validators are tool that are used to validate JSON data.

Why JSON formatter and validator required.

If you get data from server it is in unformatted way

Like I get JSON data from url

api.openweathermap.org/data/2.5/weather?q=London

This will provide me weather information of London

FIg: JSON response from api.openweathermap.org

Above JSON data is difficult to read we have to format above data to make it readable.

Few online tools that can be used are

JSONLint – The JSON Validator

JSON Formatter & Validator

and many more

put code received from URL to any one validator that validate and structure the data so that it can be readable

Fig: Formatted JSON from api.openweathermap.org