JavaScript —The handbook of JSON

What is JSON?

• JSON stands for JavaScript Object Notation.
• It is a lightweight data-interchange format.
• It is a language independent it means the syntax is derived from JavaScript object notation, but the JSON format is text only for storing and transporting data.
• It is used for sending the data.
• It is a plain text, written in JavaScript object notation.
• The JSON format was originally specified by Douglas Crockford.

Example of JSON:

// JSON string:
let JSONString = {"book":"Zero to Hero in English Grammar", "author":"Kotresh R. Naik", "publication":"SS SET Publication", "year":2014}

This string defines an object of 4 properties:

• book
• author
• publication
• year

The above properties have respective values. For example, the value of ‘book’ is ‘Zero to Hero in English Grammar’.

If the JSON string is parsed, the data can be accessed as an object.

let JSONObject = JSON.parse(JSONString)

JSONObject will be shown below:

{book:"Zero to Hero in English Grammar", author:"Kotresh R. Naik", publication:"SS SET Publication", year:2014}

After parsing, we can access the data as shown below:

let bookName = JSONObject.book
// Zero to Hero in English Grammar
let authorName = JSONObject.author
// Kotresh R. Naik

Why JSON?

• The format of JSON is syntactically same as the code for creating the JavaScript objects. So a JavaScript program can easily be converted into JavaScript objects from JSON data.
• JSON data can be sent between the computers, and used by any programming language because the format is text only.
• The built in function of JavaScript for converting JSON strings into JavaScript objects is: JSON.parse()
• The built in function of JavaScript for converting JavaScript objects into JSON strings is: JSON.stringify()
• The pure text can be received from a server and used it as a JavaScript object.
• The JavaScript object can be sent to a server in pure text format.

JSON Data- Syntax- Rules-Values:

JSON Data = Name/Key + Value

JSON data can be name/value or key/value pairs.

A key/value or name/value pair can be consisted of a field name (in double quotes), followed by a colon and a value: “name” : “Kotresh”

JSON Syntax: JSON syntax is derived from JavaScript object notation syntax.

"name" : "value" or "key" : "value"

Syntax Rules:

• Data must be in key/value or name/value pairs:

For example, "name" : "value" or "key" : "value"

• It can be separated by commas:

For example, {"key1" : "value1", "key2" : "value2", "key3" : "value3"}

• Objects are written in curly braces:

For example, {"name1" : "value1", "name2" : "value2", "name3" : "value3"}

• Arrays are written in square brackets:

For example,
[ {"key1" : "value1", "key2" : "value2", "key3" : "value3"},
{"key11" : "value11", "key12" : "value12", "key13" : "value13"},
{"key21" : "value1", "key22" : "value22", "key23" : "value23"} ]

JSON Values:

• The values in the JSON can be one of the following data types:

→ a number

→ a string

→ an array

→ an object

→ a boolean

→ null

• In addition to the above data types, values can also be any other valid JavaScript expression:

→ a function

→ a date

→ undefined

• In JSON, string values has to be written with double quotes whereas in JavaScript, string values can be written with either double or single quotes:

JSON: {"key": "value"}
JavaScript: {key : 'value'} / {key : "value"}

JSON Numbers:
Numbers can be an integer or a floating point.

Example: {“age”:34}

JSON Strings
Strings must be written in double quotes.

Example: {“fName”:”Koti”}

JSON Arrays:

Example:
{
“students”:[“Koti-1”, “Koti-2”, “Koti-3”]
}

JS Objects as JSON:

• Very little extra software is required to work with JSON within the JavaScript because the JSON syntax is derived from JavaScript Object Notation.
• JS objected can be created and assigned with data as shown below:

let myDetails = { fName: "Koti", lName: "Naik", age: 34, city: "Bengaluru", country: "India" }

To access, these two ways can be used:

myDetails.fName; // returns Koti

myDetails["lName"] // returns Naik

Modification of the data of an object can be done in the below two way:

myDetails.fName = "Rama"; // returns Rama

myDetails["lName"] = "Rathod"; // returns Rathod

JSON Booleans:

Values must be true/false.

Example: {“car”:true}

JSON null:

Values must be null.

Example: {“lName”:null}

Files in JSON:

• The type of the JSON files is “.json”.
• The MIME type for the JSON text is “application/json”.

Difference between JSON and XML:

• To receive the data from the web server, both JSON and XML will be used.
• Examples for both JSON and XML:

// Example for JSON:
{ "students": [
 {"fName":"Koti-1", "lName":"Naik-1"},
 {"fName":"Koti-2", "lName":"Naik-2"},
 {"fName":"Koti-3", "lName":"Naik-3"},
]}

// Example for XML:
<students>
   <student>
     <fName>Koti-1</fName> <lName>Naik-1</lName>
   </student>
   <student>
     <fName>Koti-2</fName> <lName>Naik-2</lName>
   </student>
   <student>
     <fName>Koti-3</fName> <lName>Naik-3</lName>
   </student>
</students> 

JSON and XML are alike with the below reasons:

• Both are human readable ie self describing.
• Both are hierarchical which means values within values.
• Both can be parsed and used by lots of programming languages.
• Both can be fetched with an XMLHttpRequest.

JSON and XML are not alike with the below reasons:

• JSON is shorter compared to XML.
• The data can be read and written quickly.
• Arrays can be used in JSON.
• End tag is not used in JSON.

The Main difference is:

• XML must be parsed with an XML parser.
• JSON is able to be parsed by a standard JavaScript function.

Why JSON is Better Than XML?
XML is much more difficult to parse than JSON meanwhile JSON is parsed into a ready-to-use JavaScript object.

For AJAX applications, JSON is faster and easier than XML:

Using XML

Fetch an XML document
Use the XML DOM to loop through the document
Extract values and store in variables

Using JSON

Fetch a JSON string
JSON.Parse the JSON string

continued soon…