What is JSON?

1.8K

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition – December 1999.

It is a text format that is completely language-independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.

Exchanging Data

• When exchanging data between a browser and a server, the data can only be text.
• JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server.
• We can also convert any JSON received from the server into JavaScript objects.
• This way we can work with the data as JavaScript objects, with no complicated parsing and translations.

JSON data structure types and how to read them:

1. JSON objects
2. JSON objects in array
3. Nesting of JSON objects

1) JSON objects:

var chaitanya = {
  "name" : "Chaitanya Singh",
  "age" : "28",
  "website" : "beginnersbook"
};

The above text creates an object that we can access using the variable chaitanya. Inside an object we can have any number of key-value pairs like we have above. We can access the information out of a JSON object like this:

document.writeln("The name is:  " +chaitanya.name);
document.writeln("his age is: " + chaitanya.age);
document.writeln("his website is: "+ chaitanya.website);

2) JSON objects in array

In the above example we have stored the information of one person in a JSON object suppose we want to store the information of more than one person; in that case we can have an array of objects.

var students = [{
   "name" : "Steve",
   "age" :  "29",
   "gender" : "male"

},
{
   "name" : "Peter",
   "age" : "32",
   "gender" : "male"

},
{
   "name" : "Sophie",
   "age" : "27",
   "gender" : "female"
}];

To access the information out of this array, we do write the code like this:

document.writeln(students[0].age); //output would be: 29
document.writeln(students[2].name); //output: Sophie

You got the point, right? Let’s carry on with the next type.

3) Nesting of JSON objects:

Another way of doing the same thing that we have done above.

var students = {
  "steve" : {
  "name" : "Steve",
  "age" :  "29",
  "gender" : "male" 
},

"pete" : {
  "name" : "Peter",
  "age" : "32",
  "gender" : "male"
},

"sop" : {
  "name" : "Sophie",
  "age" : "27",
  "gender" : "female"
}
}

Do like this to access the info from above nested JSON objects:

document.writln(students.steve.age);  //output: 29
document.writeln(students.sop.gender);  //output: female

JSON & JavaScript:

JSON is considered as a subset of JavaScript but that does not mean that JSON cannot be used with other languages. In fact it works well with PHP, Perl, Python, Ruby, Java, Ajax and many more.

Just to demonstrate how JSON can be used along with JavaScript, here is an example:
If you have gone though the above tutorial, you are familiar with the JSON structures. A JSON file type is .json

How to read data from json file and convert it into a JavaScript object?
We have two ways to do this.
1) Using eval function, but this is not suggested due to security reasons (malicious data can be sent from the server to the client and then eval in the client script with harmful effects).
2) Using JSON parser: No security issues plus it is faster than eval. Here is how to use it:

var chaitanya = {
"name" : "Chaitanya Singh",
"age" : "28",
"website" : "beginnersbook"
};

We are converting the above JSON object to javascript object using JSON parser:

var myJSObject = JSON.parse(chaitanya);

How to convert JavaScript object to JSON text?
By using method stringify

var jsonText= JSON.stringify(myJSObject);

JSON Objects

JSON objects are written inside curly braces.

Just like in JavaScript, objects can contain multiple name/value pairs:{“firstName”:”John”, “lastName”:”Doe”}

JSON vs. XML

Let see how JSON and XML look when we store the records of 4 students in a text based format so that we can retrieve it later when required.

JSON style:

{"students":[
   {"name":"John", "age":"23", "city":"Agra"},
   {"name":"Steve", "age":"28", "city":"Delhi"},
   {"name":"Peter", "age":"32", "city":"Chennai"},
   {"name":"Chaitanya", "age":"28", "city":"Bangalore"}
]}

XML style:

<students>
  <student>
    <name>John</name> <age>23</age> <city>Agra</city>
  </student>
  <student>
    <name>Steve</name> <age>28</age> <city>Delhi</city>
  </student>
  <student>
    <name>Peter</name> <age>32</age> <city>Chennai</city>
  </student>
  <student>
    <name>Chaitanya</name> <age>28</age> <city>Bangalore</city>
  </student>
</students>

As you can clearly see JSON is much more light-weight compared to XML. Also, in JSON we take advantage of arrays that is not available in XML.