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>

 

 

  Modified On Sep-18-2014 01:24:02 PM

Leave Comment