About JSON

JSON Stands for javascript object notation as a name suggest it is extended from javascript. The main purpose of JSON is transferring data; this transfer may be between different pages/application and server those application may build in different languages.
JSON is a lightweight in compare to XML which provide similar functionality of transferring data but XML is very verbose. However JSON is extend from javascript but it is used by Manny programming languages such as PHP, asp, Peal, python, ruby, java, and more. Because of json is text based it is easy to read/write and understood json data.

We can also store content of json in a separated text file with Extension of json file is .json MIME is application/json.

Offer: If you are interested to learn more about Apache Cordova then you can visit my video series on Udemy.

Example

{
	"name": "India",
	"capital": "Delhi",
	"currency": "Rupee"
}

Syntax of JSON

  • Data is represented in key/value pairs
  • Data is separated by commas
  • Square brackets hold arrays
  • Curly braces hold objects

Use JSON in JavaScript

var json_data = {
	"item_id": 101,
	"item_title": "My Title",
	"item_desc": "Long Long Desc..."
}
alert(json_data.item_title);
document.write("Item Id: " + json_data.item_id + " Item Title: " + json_data.item_title + " Item Desc: " + json_data.item_desc);

Data Types
JSON supports various Data Types, Which includes Number, String, Boolean, Array, Object, Null.

Type Description
Number Integer & Floating Point Values
String Double Quoted data, with backslash escaping
Boolean True or False
Array Ordered sequence of values
Object Collection of key:value pairs
null Empty value

Object v/s Array
Object & Array both sounds similar but there is difference between them.

  • Object is an unordered set of name/value pairs, Array is an ordered collection of values.
  • Objects are enclosed in curly braces, Array enclosed in square brackets.

Example of JSON Array
Bellow snippet contains code for creating JSON data which represent array of messages and how to retrieve those messages through JavaScript. We are already see how to use Objects in JSON in our Example of JSON(2nd snippet).

var json_data = {
	"messages": [
		"Hello, How are you?",
		"Good Morning",
		"See you Leter"
	]
}

document.write(json_data.messages[0]);
document.write("<hr>");
document.write(json_data.messages[1]);
document.write("<hr>");
document.write(json_data.messages[2]);

Parse JSON
Till now we are passing JSON data to variable. But what happen when retired json data in the form of string means enclosed with double cotes. In this case we need to parse our string data to json so we can retrieve it using dot operator. For this we have 2 options

  • We can use parse method of JSON object
  • Or use eval()

The eval() function can compile and execute any JavaScript statements. That’s why we need to avoid it.

Display JSON data as String
If you want to display json data then if you try it to print through document.write()/alert() then it will print [object Object] but it does not show it in the form of json means with curly braces & square brackets. For this we need to use stringify() method of JSON object.
This will help for debugging if you retrieve data from other source and generate data dynamically.

JSON.stringify(data, null, 4)

Determine errors in JSON
If errors occurred in our json data then it is very difficult to identify manual. There are various tools/websites exist for this. I am using JSONlint which gives perfect error details. It also gives proper margin/indent to json data; this is helpful when data is minified.

Offer: If you are interested to learn more about JSON & JSON Schema then you can visit my video series on Udemy.

Leave a Reply

Your email address will not be published. Required fields are marked *