JSON in Javascript
Check out latest Mobile Phones and Books only at Flipkart.com
JSON is being widely used in Web for data transfer from client to server. But here in this article we will be understanding on what is JSON and how to use JSON in Javascript. The way JSON object is created is independent of any programming language you use. Also if you follow the JSON protocol, javascript will recognize your JSON object.
Show Hide HTML element in Javascript
What is JSON:
JSON also called Javascript Object Notation contains set of data in key value pair. It is similar to Hash Map you have in Java or Associative Arrays in Javascript or PHP etc.
Dynamic Variable in Javascript
Structure of JSON Object:
Single JSON Object:
{ key : value, key : value }
If you see here it accepts only key value pair. The value can also holds another Objects as well in this case we have nested objects. Also please note that the key value pair are separated by comma except for last one.
XML Parsing on Mozilla Firefox/Opera Browser
Nested JSON Object:
{ key : { key : value, key : value key : { key : value } } }
Here all nested objects are separated by brace brackets {}.
XML Parsing on Microsoft Internet Explorer
Using JSON in Javascript:
Here we will be understanding on how we will iterate through the JSON object, reading nested JSON objects values etc. Say for example we have following JSON object in hand.
<script type="text/javascript">
var employeeDetails = {
"name" : "Hitesh Agarwal",
"country" : "India",
"industry" : "Information Technology",
"technology" : "Java/J2EE"
}
function iterateEmployeeDetails() {
for(var data in employeeDetails) {
alert("Key:" + data + " Values:" + employeeDetails[data]);
}
}
window.onload = iterateEmployeeDetails;
</script>The above code will show an alert message having key and value inside the json object. The above example for simple in sense it has only one level of objects defined. Now we will be looking at nested JSON example.
<script type="text/javascript">
var employeeDetails = {
"name" : "Hitesh Agarwal",
"industry" : "Information Technology",
"technology" : "Java/J2EE",
"location" : {
"country" : "India",
"state" : "Maharashtra",
"city" : "Mumbai"
}
}
function iterateEmployeeDetails() {
for(var data in employeeDetails) {
alert("Key:" + data + " Values:" + employeeDetails[data]);
}
}
window.onload = iterateEmployeeDetails;
</script>Search in Array Without Looping in Javascript
The above code will show an alert message having key and value inside the json object. But for location you will received “[object Object]“, now to iterate over location object we have to run nested loop that will read all the location object. Below is the modified code of the above nested JSON object.
<script type="text/javascript">
var employeeDetails = {
"name" : "Hitesh Agarwal",
"industry" : "Information Technology",
"technology" : "Java/J2EE",
"location" : {
"country" : "India",
"state" : "Maharashtra",
"city" : "Mumbai"
}
}
function iterateEmployeeDetails() {
for(var data in employeeDetails) {
if(data == "location") {
for(var loc in employeeDetails[data]) {
alert("Key:" + loc + " Values:" + employeeDetails[data][loc]);
}
} else {
alert("Key:" + data + " Values:" + employeeDetails[data]);
}
}
}
window.onload = iterateEmployeeDetails;
</script>Schedule Function in Javascript
The above javascript code will also print the location information as well.
Related Articles:
- Object Manipulation in Javascript
- Showing Dynamic DIV above HTML SELECT Control
- Dynamic Variables in Javascript
- JavaScript XML Parsing on Microsoft Internet Explorer
- JavaScript Tutorial – Search inside Array without Looping
- Convert XML Document to String in JavaScript
- Creating Objects in Javascript
- Implementing Stack Object in JavaScript
- Objects in Javascript
- How to make sequential ajax call
There are several issues with this article. JSON can not only hold “Objects”, it can hold arrays as well as a value. The printing also has issues, and it doesn’t go to any details about nested items in several depths. What if you have 10 level of depth in the JSON? or any number. Your printing code wont work for those occasions. Take some of the well known APIs for example Flickr, Twitter etc, those have several depths in their returned JSON.
Hi Peter,
Thanks for your input, i am not saying that JSON cannot hold arrays, it can hold arrays as javascript treats array as an object only. Like var a = new Array();
Also i have just given an hint on how to iterate through nested JSON object, if you want recursive iterating through nested object than you will have to write the logic for going through the objects.
Hope this answer your query.
Thanks,
Hitesh Agarwal