Introduction
JSON stands for JavaScript Object Notation. It is a lightweight text-based open standard. The JSON format was originally specified by Douglas Crockford. It is a standard for storing and exchanging data. The official MIME type for JavaScript Object Notation text is application/json. The filename extension is .json.
JavaScript Object Notation uses JavaScript syntax. The file format is text only. Text can be read and used as a data format by any programming language. It is language independent. It is self-describing and easy to understand. Data-interchange format is light-weighted.
The data can transfer between web browser and web server only in text format. We can convert JavaScript Object to JavaScript Object Notation at the time of sending it to server. We can also convert received format from server to JavaScript Object.
JSON Syntax
The Syntax is derived from JavaScript. Data is in name/value pairs and separated by commas. Here, Curly braces hold objects. Square brackets hold arrays. Values must be one of the following data types: string, number, object (JavaScript Object Notation object), array, Boolean or null. String values must be written with double quotes.
var person = { "name":"Raman", "age":30, "city":"New Delhi" };
JSON Structure
It 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.
JavaScript object to JSON
Suppose you have an employee data. The data is stored in a JS Object. If you want to send it to server, you need to convert it into text. Here is json example:
var Obj = { "name": “Raju”, "age": 27, "city": "New Delhi" };
var myJSON = JSON.stringify(Obj);
window.location = "demo_json.php?x=" + myJSON;
In the above example, Obj is our Object. It has the data of an employee. We have stored the data in json variable myJSON and sent it to the server.
JSON to JavaScript object
In case, if you receive data from server, it will be in JavaScript Object Notation format. You can convert it into a JavaScript object easily.
var myJSON = '{ "name":"Raju", "age":27, "city":"New Delhi" }';
var Obj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = Obj.city;
In the above example, we have converted JavaScript Object Notation data into JS Object.
JSON vs. XML
JavaScript Object Notation objects are used for transferring data between server and client, XML serves the same purpose. Both JavaScript Object Notation and XML can be fetched with an XMLHttpRequest. However, JavaScript Object Notation objects have several advantages over XML.
- JavaScript Object Notation is much light-weighted compared to XML.
- In JavaScript Object Notation, we take advantage of arrays which is not available in XML.
- XML has to be parsed with an XML parser. JavaScript Object Notation can be parsed by a standard JavaScript function.
To understand it better, let us proceed with an example.
If we need to store the record of 4 employees in text format,
JSON:
{"Employees":[
{"name":"Ram", "age":"28", "city":"Mumbai"},
{"name":"Shyam", "age":"27", "city":"Delhi"},
{"name":"Radhe", "age":"23", "city":"Chennai"},
{"name":"Sita", "age":"25", "city":"Bangalore"}
]}
XML:
< Employees> < Employee> <name>Ram</name> <age>28</age> <city>Mumbai</city> </ Employee> < Employee> <name>Shyam</name> <age>27</age> <city>Delhi</city> </ Employee> < Employee> <name>Radhe</name> <age>23</age> <city>Chennai</city> </Employee> < Employee> <name>Sita</name> <age>25</age> <city>Bangalore</city> < /Employee> < /Employees>
Why JSON?
As we know, data transfer between browser and server is done only in text format. JavaScript provide us a built-in function JSON.parse() which can convert JavaScript Object Notation string format to JavaScript Object again. So, if you receive data from a server, in JavaScript Object Notation format, you can use it like any other JavaScript object.
JSON Objects
Arrays in JavaScript Object Notation are almost the same as arrays in JavaScript. Arrays can be values of an object property. Inside an object we can have any number of key-value pairs.
var emp = {
"name" : "Muninder Singh",
"age" : "28",
"website" : "msatechnosoft.in"
};
We can access the information out of a JavaScript Object Notation object as follows:
document.writeln("The name is: " +emp.name);
If we want to store the information of more than one person; in that case we can have an array of objects.
var emp = [{
"name" : "Muninder",
"age" : "28",
"gender" : "male"
},
{
"name" : "Ankita",
"age" : "27",
"gender" : "female"
},
}];
To access the information out of this array, we do write the code like this:
document.writeln(emp[0].age);
Values in an array can also be another array, or even another JSONObject:
emp = {
"name":"ankita",
"age":27,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
To access arrays inside arrays, use a for loop for each array as follows:
for (i in emp.cars) {
x += "<h1>" + emp.cars[i].name + "</h1>";
for (j in emp.cars[i].models) {
x += emp.cars[i].models[j];
}
}
We can use the index number to modify an array:
emp.cars[1] = "Mercedes";
We can use the delete keyword to delete items from an array:
delete myObj.cars[1];
JSON Stringify
It is commonly used to exchange data to/from a web server. When sending data to a web server, we need to convert the data has to a string. We can convert a JavaScript object into a string with JSON.stringify().
Let us assume an object,
var emp= {“name” = “Muninder” , “age” = 28, “city” = “New Delhi”};
Now, use the JavaScript function JSON.stringify() to convert it into a string:
var myJSON= JSON.stringify(emp);
myJSON is now a string. We can send it to the server now.
JSON Example
<!DOCTYPE html>
<html>
<body>
<h2>JSON Example by MSA Technosoft</h2>
<p id="demo"></p>
<script>
var myObj, myJSON, text, obj;
//Storing data:
myObj = { "name":"AMS", "age":27, "city":"New Delhi" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
//Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>
</body>
</html>
Why JSON is language independent?
It is a text format. It is completely language independent. It 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 it an ideal data-interchange language.
I hope you find this article useful and that it helps you to be familiar with JavaScript Object Notation. Let me know about it in comments below.
For more informative technology posts, keep visiting Tech Blog.