Compare to XML JSON is a lightweight & tag free data exchange format. JSON is language independent. JSON stands for JavaScript Object Notation. Many times during programming we found some places where we need to store static data. In this case JSON is very programmer friendly. Let’s talk about we want to display the list of Global Banks. To do this there are several ways. Here to present you a demo I stored bank related data’s in a js file using JSON format. To read data from JSON here I am with getJSON Example. Look at the Code below.
GetJSON-Example.htm
<!DOCTYPE html>
<html>
<head>
<title>How to read JSON file data in JQuery?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(document).ready(function()
{
$.getJSON("bank-records.js",function(data)
{
$.each(data.banks, function(i,data)
{
document.write(data.bankName + "<br />" + data.title + "<br /><br />");
});
}
);
return false;
});
});
</script>
</head>
<body></body>
</html>
bank-records.js
{"banks":
[
{
'bankName': 'ICICI Bank',
'title': 'Personal Banking Services'
},
{
'bankName': 'SBI Bank',
'title': 'Safe Banking With SBI'
},
{
'bankName': 'HDFC Bank',
'title': 'Personal Banking Services'
}
]
}
To run the above program Create a folder. Copy the above index.html & bank-records.js file in the same folder. Open index.html. For Jquery here I used CDN link. Make sure to run this program you are with Internet connectivity or you have to refer a local Jquery library.
