Home Tutorials Json Creating Array Objects in JavaScript with JSON

Creating Array Objects in JavaScript with JSON
Posted on: September 27, 2008 at 12:00 AM

In the previous section of JavaScript-JSON tutorial you have known that how to create an object and now in this tutorial we have provided you the way array of objects are declared in JavaScript-JSON.

Creating Array Objects in JavaScript with JSON

In the previous section of JavaScript-JSON tutorial you have known that how to create an object and now in this tutorial we have provided you the way array of objects are declared in JavaScript-JSON.

In our example file we have created an object "students" which contains two array objects "Maths" and "Science" containing name, marks and age of two students. Now we can access these objects value in the following way:

"students.Maths" for accessing Maths array and "students.Science" for accessing Science array object. Now to access first element of the Maths array we can write it as "students.Maths[1]" and then we can access elements of this array as "students.Maths[1].Name" for name and "students.Maths[1].Marks" for marks of the first student in Maths and so on.

Here is the full example code for JavaScript-JSONArray.htm file.

JavaScript-JSONArray.htm


<html>

<head>

<title>

Array JSON-JavaScript Example

</title>

<script language="javascript" >

var students = { "Maths" : [      
	{"Name" : "Amit", // First element

  "Marks" : 67,

 "age" : 23 },

	{"Name"  : "Sandeep", 
    // Second element

 "Marks" : 65,

 "age" : 21 }

 ], 

    "Science" :
     [

	{"Name"  : "Shaili",  // First Element

 "Marks" : 56,

 "age" : 27 },  

	  "Name"  : "Santosh",  // Second Element

  "Marks" : 78,

	 "age" : 41 }

 ] 

  } 

  // Printing all array values 

var i=0

document.writeln("<table border='1'><tr>");

for(i=0;i<students.Maths.length;i++)

{  

  document.writeln("<td>");

  document.writeln("<table border='0'  width=100 >");

  document.writeln("<tr><td><B>Name</B></td><td width=50>"

  +students.Maths[i].Name+"</td></tr>");

  document.writeln("<tr><td><B>Marks</B></td><td width=50>"

  +students.Maths[i].Marks +"</td></tr>");

  document.writeln("<tr><td><B>Age</B></td><td width=50>"

  +students.Maths[i].age +"</td></tr>");

  document.writeln("</table>");

  document.writeln("</td>");

}

for(i=0;i<students.Science.length;i++)

{

  document.writeln("<td>");

  document.writeln("<table border='0'  width=100 >");

  document.writeln("<tr><td><B>Name</B></td><td width=50>"

   +students.Science[i].Name+"</td></tr>");

  document.writeln("<tr><td><B>Marks</B></td><td width=50>"

   +students.Science[i].Marks +"</td></tr>");

  document.writeln("<tr><td><B>Age</B></td><td width=50>"

   +students.Science[i].age +"</td></tr>");

  document.writeln("</table>");

  document.writeln("</td>");

}

document.writeln("</tr></table>");

</script>

</head>

<body>

Using Array of objects via JSON in JavaScript

</body>

</html>

Output:

To run this example create JavaScript-JSONArray.htm and run it on browser for output.

Download Code

Related Tags for Creating Array Objects in JavaScript with JSON:
java, javascript, c, json, ide, array, script, object, io, objects, ip, vi, tutorial, ria, this, id, create, js, to, e, section, in, no, as, j, cl, declare, how, obj, pro, tor, s, so, at, k, is, ha, pre, ray, ea, and, ar, va, tutor, scr, s, s, ri, rip, th, av, hat, cts, ecl, je, pr, nd, on, o

«Previous Index Next»