How to use Array object in JavaScript using JSON
In this blog I’m going to explain you how to create array
object in JavaScript using JSON. Let’s see a brief demonstration on it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<h1 style="color: purple;">
Example
of Creating Array Object in JavaScript using JSON</h1>
</br>
<script type="text/javascript">
// Declaration of Array object using
JSON structure and data types
var StudentDetails = {
//Array to collect record of Student.
// Information of MCA students
"MCAStudent": [{
"StudentName": "Kumar
Vishu",
"Roll_No": 100,
"Stream": "Computer
Science",
"Course": "MCA"
}],
// Information of B.Tech Students
"BtechStudent": [
{
"StudentName": "Tarun
Bindra",
"Roll_No": 101,
"Stream": "Science",
"Course": "B.Tech"
}],
// Information of MBA Student
"MbaStudent": [
{
"StudentName": "Arun
Singh",
"Roll_No": 103,
"Stream": "Management
Studies",
"Course": "MBA"
}],
// Information of BE student
"BeStudent": [
{
"StudentName": "Rohit
Tyagi",
"Roll_No": 104,
"Stream": "Engineering",
"Course": "BE"
}],
// Information of B.A. student
"BaStudent":
[{
"StudentName": "Rohan
Bopanna",
"Roll_No": 105,
"Stream": "Art",
"Course": "B.A."
}]
}// End of creation of Array object in JavaScript using
with JSON
//Print Array items or elements on web
page.
//Declare variable to count array
element
var i = 0;
document.writeln("<table border='2' width='1000'><tr>");
// Print MCA Student details on web page
for (i = 0; i < StudentDetails.MCAStudent.length;
i++) {
document.writeln("<td><table><tr>");
document.writeln("<td>")
document.writeln("<table><tr>" + "<td><b>Student
Name:</b></td>" + "<td>" + StudentDetails.MCAStudent[i].StudentName
+ "<td></tr>");
document.writeln("<tr>" + "<td><b>Roll_No:</b></td>"
+ "<td>" +
StudentDetails.MCAStudent[i].Roll_No + "<td></tr>");
document.writeln("<tr>" + "<td><b>Stream:</b></td>"
+ "<td>" +
StudentDetails.MCAStudent[i].Stream + "<td></tr>");
document.writeln("<tr>" + "<td><b>Course:</b></td>"
+ "<td>" +
StudentDetails.MCAStudent[i].Course + "<td></tr>");
document.writeln("</td>");
document.writeln("</tr></table></td>");
}
// Print B.Tech Student details
for (i = 0; i < StudentDetails.BtechStudent.length;
i++) {
document.writeln("<td><table ><tr>");
document.writeln("<td>")
document.writeln("<table><tr>" + "<td><b>Student
Name:</b></td>" + "<td>" + StudentDetails.BtechStudent[i].StudentName
+ "<td></tr>");
document.writeln("<tr>" + "<td><b>Roll_No:</b></td>"
+ "<td>" +
StudentDetails.BtechStudent[i].Roll_No + "<td></tr>");
document.writeln("<tr>" + "<td><b>Stream:</b></td>"
+ "<td>" +
StudentDetails.BtechStudent[i].Stream + "<td></tr>");
document.writeln("<tr>" + "<td><b>Course:</b></td>"
+ "<td>" +
StudentDetails.BtechStudent[i].Course + "<td></tr>");
document.writeln("</td>");
document.writeln("</tr></table></td>");
}
// Print MBA Student Details
for (i = 0; i < StudentDetails.MbaStudent.lenght;
i++) {
document.writeln("<td><table><tr>");
document.writeln("<td>")
document.writeln("<table><tr>" + "<td><b>Student
Name:</b></td>" + "<td>" + StudentDetails.MbaStudent[i].StudentName
+ "<td></tr>");
document.writeln("<tr>" + "<td><b>Roll_No:</b></td>"
+ "<td>" +
StudentDetails.MbaStudent[i].Roll_No + "<td></tr>");
document.writeln("<tr>" + "<td><b>Stream:</b></td>"
+ "<td>" +
StudentDetails.MbaStudent[i].Stream + "<td></tr>");
document.writeln("<tr>" + "<td><b>Course:</b></td>"
+ "<td>" +
StudentDetails.MbaStudent[i].Course + "<td></tr>");
document.writeln("</td>");
document.writeln("</tr></table></td>");
}
// Print BE Student Details
for (i = 0; i < StudentDetails.BeStudent.length;
i++) {
document.writeln("<td><table><tr>");
document.writeln("<td>")
document.writeln("<table><tr>" + "<td><b>Student
Name:</b></td>" + "<td>" + StudentDetails.BeStudent[i].StudentName
+ "<td></tr>");
document.writeln("<tr>" + "<td><b>Roll_No:</b></td>"
+ "<td>" +
StudentDetails.BeStudent[i].Roll_No + "<td></tr>");
document.writeln("<tr>" + "<td><b>Stream:</b></td>"
+ "<td>" +
StudentDetails.BeStudent[i].Stream + "<td></tr>");
document.writeln("<tr>" + "<td><b>Course:</b></td>"
+ "<td>" +
StudentDetails.BeStudent[i].Course + "<td></tr>");
document.writeln("</td>");
document.writeln("</tr></table></td>");
}
// Print BA student Details
for (i = 0; i < StudentDetails.BaStudent.length;
i++) {
document.writeln("<td><table><tr>");
document.writeln("<td>")
document.writeln("<table><tr>" + "<td><b>Student
Name:</b></td>" + "<td>" + StudentDetails.BaStudent[i].StudentName
+ "<td></tr>");
document.writeln("<tr>" + "<td><b>Roll_No:</b></td>"
+ "<td>" +
StudentDetails.BaStudent[i].Roll_No + "<td></tr>");
document.writeln("<tr>" + "<td><b>Stream:</b></td>"
+ "<td>" +
StudentDetails.BaStudent[i].Stream + "<td></tr>");
document.writeln("<tr>" + "<td><b>Course:</b></td>"
+ "<td>" +
StudentDetails.BaStudent[i].Course + "<td></tr>");
document.writeln("</td>");
document.writeln("</tr></table></td>");
}
document.writeln("</tr></table>");
</script>
</body>
</html>