JavaScript Object Notation (JSON) is a text-based open standard data exchange platform. It is popular due to its easy to use & lightweight to handle. JSON is self-describing & platform independent. Today nearly all advanced languages & third party components supports JSON for data interchange. To open or edit a JSON file you required only a text-editor. Father of JSON is Douglas Crockford. Extension for a JSON file is .json. Media type for JSON is application/json. This JSON Tutorial is special designed for beginners.
How to Create a JSON file?
As we speak above it is very easy to create a JSON file. Open a Notepad & type the following codes. Save it as <Your File Name>.json.
{
"employees": [
{
"id":"996782",
"name": "Biswabhusan Panda",
"designation": "Project Manager",
"organization": "InfoSys"
},
{
"id":"996787",
"name": "Manoj Pal",
"designation": "Team Lead",
"organization": "Wipro"
}
]
}
In the above example I created a JSON file for employees. Here for each employee I declared 4 columns id, name, designation & organization. Employees is an array object. Here employees array contains 2 elements. I mean details of 2 employee. It can be extend further as per your requirements.
How JSON is different from XML?
During development experienced programmers also get confused about which one they need to choose for data exchange. XML or JSON. Lets us compare JSON with XML. Both these languages have some similarities. XML & JSON both are self-describing & hierarchical. During data binding we can fetch XML or JSON in similar ways. In the following matter JSON is rich compare to XML.
- Like XML tags JSON never required a end tag.
- Compare to XML JSON is more programmer friendly & easy to learn.
- JSON can use Arrays.
Syntax Rule for JSON
JSON Syntax is derived from JAVASCRIPT. To store data in JSON we use key & value pair. To represent each data unique in JSON we use commas. To declare an object according to JSON Syntax rule we need to follow Curly braces. Square brackets hold arrays.
Datatypes JSON Supports
JSON support Number (Integer or Floating points), String, Boolean, Array & Objects. We can also store null value in a JSON objects.
What are the Browsers JSON Supports?
JSON supports Firefox 3.5, Internet Explorer 8, Google Chrome, Opera 10, Safari 4 or above.
How to display data from JSON to HTML page?
Using XMLHttpRequest object you can easily display JSON data in HTML. Once the request send to the server in response you will receive all data in the shape of an Array. Here to display records I am using a string variable in my JS function. After string concatenation inside the for loop I am displaying str contents to div using innerHTML method.
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="displayRecords"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "demo.txt";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var paramArr = JSON.parse(xmlhttp.responseText);
myFunction(paramArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(myArr) {
var str = "";
var i;
for(i = 0; i < myArr.length; i++) {
str += '<a href="' + myArr[i].links + '">' +
myArr[i].tutorial + '</a><br>';
}
document.getElementById("displayRecords").innerHTML = str;
}
</script>
</body>
</html>
