What is JSon?
Its Java Script Object Notation
1. Light weight data interchange format2. Easy to parse compare to xml
3. Minimal
4. A Subset of javascript
Points to remember about JSon:
1. It is based on key-value
2. The json object is represents using {key:value}
3. The key must be enclose with ""
4. Examples are: {"firstName":"vikash","lastName":"Kumar"}
3. The jsonArray is represents using []
5. Example are [1,2,3,4,"vikash","kumar"]
Here is the Complete Full Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Vikash JavaScript With JSon Example</TITLE>
</HEAD>
<BODY>
<h1>To See the Example Plese Click on the Below Button!</h1>
<input type="button" value="Hit Me!" onClick="calculate()">
</BODY>
</HTML>
<script>
var employees = {
"person" : [ {
"firstName" :"vikash",
"lastName" :"kumar",
"age" :29,
"email":"vikash.kumar@gmail.com",
"phone" : [ {
"home" :9852232900,
"personal" :9899267293,
"office" :013543215,
"mobile" :985432123
} ]
}, {
"firstName" :"Kalu",
"lastName" :"Dawn",
"age" :25,
"email":"kaludawn@gmail.com",
"phone" : [ {
"home" :9332232900,
"personal" :9834267293,
"office" :12345,
"mobile" :9853441300
} ]
}, {
"firstName" :"Babli",
"lastName" :"Singh",
"age" :29,
"email":"babli.singh@gmail.com",
"phone" : [ {
"home" :9899909000,
"personal" :9899267293,
"office" :0140799005,
"mobile" :989000309
} ]
}, {
"firstName" :"Raj",
"lastName" :"Mohan",
"age" :49,
"email":"rajmohan@gmail.com",
"phone" : [ {
"home" :8998762900,
"personal" :9899267293,
"office" :013543215,
"mobile" :985432123
} ]
}
]
}
function calculate() {
//alert(JSON.stringify(employees));
document.write("<table border='1' align='center'>");
document.write("<tr>");
document.write("<th colspan='4' bgcolor='green'>Personal Details</th>")
document.write("<th colspan='4' bgcolor='blue'>Contact Details</th>")
document.write("</tr>");
document.write("<tr>");
document.write("<th>First Name</th><th>Last Name</th><th>Age</th><th>Email</th>")
document.write("<th>Home</th><th>Personal</th><th>Office</th><th>Mobile</th>")
document.write("</tr>")
document.write("<tr bgcolor='red'>")
for ( var i = 0; i < employees.person.length; i++) {
document.write("<tr bgcolor='cyan'>")
document.write("<td>")
document.writeln(employees.person[i].firstName)
document.write("</td>")
document.write("<td>")
document.writeln(employees.person[i].lastName)
document.write("</td>")
document.write("<td>")
document.writeln(employees.person[i].age)
document.write("</td>")
document.write("<td>")
document.writeln(employees.person[i].email)
document.write("</td>")
for ( var j = 0; j < employees.person[i].phone.length; j++) {
document.write("<td>")
document.writeln(employees.person[i].phone[j].home)
document.write("</td>")
document.write("<td>")
document.writeln(employees.person[i].phone[j].personal)
document.write("</td>")
document.write("<td>")
document.writeln(employees.person[i].phone[j].office);
document.write("<td>")
document.writeln(employees.person[i].phone[j].mobile);
document.write("</td>")
document.write("</td>")
document.write("</tr>");
}
}
document.write("</table>")
}
</script>
No comments:
Post a Comment