articles

Home / DeveloperSection / Articles / Creating Array Objects in JavaScript with JSON

Creating Array Objects in JavaScript with JSON

Anonymous User8266 08-May-2012

This article is going to explain how to create array objects in JavaScript using JSON (JavaScript Object Notation).

JSON provides and different way through which we can create array objects in JavaScript.

Syntax of creating Array objects in JavaScript with JSON:

If the JSON data describes an array and each element of that array is an object.

<script  type="text/javascript">

var      variableName = {

// JSON Script data

……………………………

…………………………..

}

</script>


Here I’m creating an example on how to create Array objects in JavaScript using with JavaScript Object Notification (JSON).

// 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


Let’s see a complete demonstration on creating Array objects in Java Script. Write the following code:

<!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>


Now save this code in html format and execute on web browser.

Creating Array Objects in JavaScript with JSON

This is the complete description of creating array object in javascript using JSON.



Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By