Home Tutorials Json Creating Array Objects in JavaScript with JSON
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Creating Array Objects in JavaScript with JSON

Advertisement
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

     

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 27, 2008

Ask Questions?    Discuss: Creating Array Objects in JavaScript with JSON   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Ramanujam
April 10, 2011
some error in the json array example

in above example in 21 line your are missing { so please rectify this mistake ,other it will javascript error
Kumar
April 18, 2011
Error

any one found that error?
vibhav
May 29, 2011
code not working

This code does not work , please check it
vibhav
May 29, 2011
wrong code

one "{" is missing before science santosh.
shock
July 8, 2011
error.

"Name" : "Santosh", // Second Element the opening curly "{" bracket is missing in the bbove line of code
Chaitanya
August 27, 2011
Doesn't work

Yeah this example doesn't seem to work. You missed a '{' before the name "Santosh" in the "Science" part earlier.
avinash
January 21, 2012
error

{"Name" : "Sandeep", // Second element "Marks" : 65, "age" : 21 } ], "Science" : [ {"Name" : "Shaili", // First Element "Marks" : 56, "age" : 27 }, "Name" : "Santosh", // Second Element//error:in this line before "Name" there is "{" bracket missing "Marks" : 78, "age" : 41 } ] }
Karthick moorthy
March 29, 2012
'{' missing in creating the object

In science array when declaring the second student name, to create the object '{' is needed. It's missing there. So it will not produce appropriate result... It should be like.... "Science" : [ {"Name" : "Shaili", // First Element "Marks" : 56, "age" : 27 }, { "Name" : "Santosh", // Second Element "Marks" : 78, "age" : 41 } ]
Rajat Sharma
May 8, 2012
Error in code

Please replace "Name" : "Santosh", // Second Element with {"Name" : "Santosh", // Second Element "{" is missing.
nishant pandey
June 22, 2012
Thankyou!

I really appreciate your effort. Its quiet easy to understand.
Rajesh
June 26, 2012
Review abt above code

Hi, Nice code,easily understandable one.... Thank u for posting that great code......
Ramnath
September 6, 2012
Correction

It would be apt if the objectName "student" is replaced with "Exam" and "name" with "StudentName".
DMCA.com