Introduction To JSON

In this blog, you will learn what JSON is, and how data is stored and retrieved in JSON format.

This blog is a brief introduction of what JSON is and how we can store and retrieve the data in different ways, using JSON. 

Introduction to JSON 

• JSON stands for JavaScript Object Notation.
• JSON format was originally specified by Douglas Crockford.
• JSON is a lightweight data interchange format and can be used to exchange/send /recieve the data between the Browser and the Server.
• JSON is “self-describing” and easy to understand.
• Language independent.
• The file type for JSON files is ".json".
• The MIME type for JSON text is "application/json". 

JSON Vs XML

JSON is more compact and faster than XML, as less data is transferred in the case of JSON. XML is  more difficult to parse than JSON. JSON is parsed into a ready-to-use JavaScript object.

For ex -for AJAX Applications, JSON is faster and easier than XML:

Using XML

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

Using JSON

• Fetch a JSON string.
• JSON.Parse the JSON string.

JSON Syntax

JSON data is written in name-value pairs.

{“name”:”value”}

For ex

//Json Object

var student = {"name":"Rashmi","gender":"F","dept":"IT","address":"Gurgaon"};

name, gender, dept, address are the properties of json object and seprated by comma(,).

In JSON, the values must be one of the data types given below.

• null
• a string
• a number
• an object (JSON object)
• an array
• a boolean

The data can be stored in JSON format, as shown below.

• JSON Object.
• JSONArray.
• Nested Json Object 

JSON Object

Here is an example on how to store student data in a JSON object.

//Json Object
var studentJson = {
    "name": "Rashmi",
    "gender": "F",
    "dept": "IT",
    "address": "Gurgaon"
};
Read Data from json object:
    // To read property of studentJson
    var name = studentJson.name;
var gender = studentJson.gender;
var department = studentJson.dept;
var address = studentJson.address;

JSON Array

JSON Array is used to store multiple JSON objects. For example, if we want to store more than one student's information in ‘studentJson’, we use JSON Array .

To create JSON Array, JSON object is wrapped in square brackets and separated by commas, as shown below.

/Json Array
var studentJson = [{
    "name": "Rashmi",
    "gender": "F",
    "dept": "IT",
    "address": "Gurgaon"
}, {
    "name": "Ashwani",
    "gender": "M",
    "dept": "Admin",
    "address": "Gurgaon"
}, {
    "name": "Sneha",
    "gender": "F",
    "dept": "HR",
    "address": "Gurgaon"
}];
    // To read property of first student of array
    var name = studentJson[0].name; //results "Rashmi"
var gender = studentJson[0].gender; //results "F"
var department = studentJson[0].dept; //results "IT"
var address = studentJson[0].address; // results "Gurgaon"

Nested JSON Object

Nested JSON object is an another way to store multiple JSON objects. To nest JSON object, we use additional “{}” instead of “[]”.

For example, we have three JSON objects “Rashmi” , ”Ashwani” , ”Sneha” enclosed within {}. To read the property of each, an object can directly use an object name with the property name, as described below.

//Nested Json Object
var studentJson = {
    Rashmi: {
        "name": "Rashmi",
        "gender": "F",
        "dept": "IT",
        "address": "Gurgaon"
    },
    Ashwani: {
        "name": "Ashwani",
        "gender": "M",
        "dept": "Admin",
        "address": "Gurgaon"
    },
    Sneha: {
        "name": "Sneha",
        "gender": "F",
        "dept": "HR",
        "address": "Gurgaon"
    }
};
// To read property of json object "Rashmi"
var name = studentJson.Rashmi.name; //results "Rashmi"
var gender = studentJson.Rashmi.gender; //results "F"
var department = studentJson.Rashmi.dept; //results "IT"
var address = studentJson.Rashmi.address; // results "Gurgaon".

Happy coding.