JSON – Basic Intro
JSON (pronounced like “Jason“): short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. The official Internet media type for JSON is “application/json“. The JSON file extension is .json.
The JSON format is often used for serialization, transmitting structured data over a network connection. Its main application is in Ajax web application programming, where it serves as an alternative to the use of the XML format. JSON is supported by MSIE 5.5+, Mozilla/4.0 and most of other browsers.
Now let’s do some examples.
In Javascript we know how to declare and initiate an object:
var myObject = new Object();
it’s simple…now we will declare JSON:
var myJSON = { } ;
yes, it’s braces (curly brackets) not parentheses… thats how to declare it.. we don’t need any external javascript files.
Now we will use it as data object, we will store some data about person:
var personJSON = { “firstName” : “Ibraihm”,
“lastName” : “Dwaikat”,
“address” : “Palestine”};
We stored it, now we will use it, there are two ways to access the data:
1- Using Dot Notation:
document.write(personJSON.firstName); // prints the first name:Ibrhahim
document.write(personJSON.lastName); // prints the last name:Dwaikat
2- Like Associative Array:
document.write(personJSON[“firstName”]); // prints the first name:Ibrhahim
document.write(personJSON[“lastName”]); // prints the last name:Dwaikat
NOTE that this is NOT Associative Array, it appears like associative array
Let’s do another example, more complex, let’s make a category of websites: Arabic websites and English websites, each website contains data about website name, URL and website type, this can be coded in JSON as follows:
var websites = { “arabicWebsites” : [ //this category is an array of arabic websites
{“websiteName” : “Balata-Albalad”,
“websiteURL” : “http://www.balata-albalad.org”,
“websiteType” : “Information website”} ,
{“websiteName” : “Google Jordan”,
“websiteURL” : “http://www.google.jo”,
“websiteType” : “Search Engine” }
], //end of arabicWebsites
“englishWebsites” : [ //this category is an array of english websites
{“websiteName” : “Ibrahim Dwaikat”,
“websiteURL” : “http://www.idwaikat.me”,
“websiteType” : “Personal website”} ,
{“websiteName” : “Facebook”,
“websiteURL” : “http://www.facebook.com”,
“websiteType” : “Social network service” },
{“websiteName” : “Wolfram Alpha”,
“websiteURL” : “http://www.wolframalpha.com”,
“websiteType” : “Answer Engine”}
] //end of englishWebsites
} // end of websites
now we will access the websites and write it on the screen as hyperlinks (<a href=’http….’>site</a>) then writing <br/> to write the next one on new line, we will do it using two for loops, one for ArabicWebistes and one for EnglishWebsite, it may be done like this:
document.write(“<hr />ARABIC WEBSITES: <br /><br />”);
for(var i=0; i<websites.arabicWebsites.length; i++)
{
document.write(“<a href='” + websites.arabicWebsites.websiteURL + “‘>” + websites.arabicWebsites.websiteName + ” (“ + websites.arabicWebsites.websiteType +“) “ + “</a><br />”);
}
document.write(“<hr />ENGLISH WEBSITES: <br /><br />”);
for(var i=0; i<websites.englishWebsites.length; i++)
{
document.write(“<a href='” + websites.englishWebsites.websiteURL + “‘>” + websites.englishWebsites.websiteName + ” (“ + websites.englishWebsites.websiteType +“) “ + “</a><br />”);
}
the output is something like this:
ARABIC WEBSITES:
Balata-Albalad (Information website)
Google Jordan (Search Engine)
ENGLISH WEBSITES:
Ibrahim Dwaikat (Personal website)
Facebook (Social network service)
Wolfram Alpha (Answer Engine)
That’s all about how to basically use JSON, the next lesson will be: How to send JSON data to ASP.NET server.. see you soon, thanks for reading.
PS: The following is the full code used in this lesson
<html>
<head>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
//object
var myObject = new Object();
//JSON
var myJSON = { } ;
var personJSON = { “firstName” : “Ibraihm”,
“lastName” : “Dwaikat”,
“address” : “Palestine”};
//Accessing data using dot notation
document.write(personJSON.firstName); // prints the first name:Ibrhahim
document.write(personJSON.lastName); // prints the last name:Dwaikat
document.write(“<br />”); //new line, just for formatting purposes
//Accessing data like Associative Array
document.write(personJSON[“firstName”]); // prints the first name:Ibrhahim
document.write(personJSON[“lastName”]); // prints the last name:Dwaikat
document.write(“<br />”); //new line, just for formatting purposes
var websites = { “arabicWebsites” : [ //this category is an array of arabic websites
{“websiteName” : “Balata-Albalad”,
“websiteURL” : “http://www.balata-albalad.org”,
“websiteType” : “Information website”} ,
{“websiteName” : “Google Jordan”,
“websiteURL” : “http://www.google.jo”,
“websiteType” : “Search Engine” }
], //end of arabicWebsites
“englishWebsites” : [ //this category is an array of english websites
{“websiteName” : “Ibrahim Dwaikat”,
“websiteURL” : “http://www.idwaikat.me”,
“websiteType” : “Personal website”} ,
{“websiteName” : “Facebook”,
“websiteURL” : “http://www.facebook.com”,
“websiteType” : “Social network service” },
{“websiteName” : “Wolfram Alpha”,
“websiteURL” : “http://www.wolframalpha.com”,
“websiteType” : “Answer Engine”}
] //end of englishWebsites
} // end of websites
document.write(“<hr />ARABIC WEBSITES: <br /><br />”);
for(var i=0; i<websites.arabicWebsites.length; i++)
{
document.write(“<a href='” + websites.arabicWebsites.websiteURL + “‘>” + websites.arabicWebsites.websiteName + ” (“ + websites.arabicWebsites.websiteType +“) “ + “</a><br />”);
}
document.write(“<hr />ENGLISH WEBSITES: <br /><br />”);
for(var i=0; i<websites.englishWebsites.length; i++)
{
document.write(“<a href='” + websites.englishWebsites.websiteURL + “‘>” + websites.englishWebsites.websiteName + ” (“ + websites.englishWebsites.websiteType +“) “ + “</a><br />”);
}
</script>
</body>
</html>
References:
json.org
wikipedia.org
metaparadigm.com