How to print an object array with JavaScript

Question

I declared 4 objects and pushed them in the array myArray. Now I want to print this array in a table using JavaScript.

Here is my code:

<style>
  #div1
  {
    background:pink;
    width:100%;
    height:80%;
    padding:5%;
    border:1px solid black;
  }
  table,th,td {
    border:1px solid black;
    padding:1px;
  }
</style>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    #div1
    {
      background:pink;
      width:100%;
      height:80%;
      padding:5%;
      border:1px solid black;
    }
    table,th,td {
      border:1px solid black;
      padding:1px;
    }
  </style>
</head>
<body>
  <div id="div1">
    <table>
      <script>
        var student1 = { Name: "Amol", rno: 1, Class: "MCA", Div: "A" };
        var student2 = { Name: "Sagar", rno: 2, Class: "MBA", Div: "B" };
        var student3 = { Name: "Bhushan", rno: 1, Class: "MMM", Div: "C" };
        var student4 = { Name: "Nachiket", rno: 1, Class: "MPM", Div: "A" };

        var MyArray = [];
        myArray[0].push(student1);
        myArray[1].push(student2);
        myArray[2].push(student3);
        myArray[3].push(student4);

        //document.write("<tr><th>"+ Name+</th>"+
        //"<th>RollNumber</th>"
        //"<th>Class</th>"
        //"<th>Division</th>");
        //"</tr>"
        alert("p");
        
        for (var i = 0; i < MyArray.length; i++) {
          document.write("<tr><td>" + MyArray[i].Name + "</td>");
          document.write("<td>" + MyArray[i].rno + "</td>");
          document.write("<td>" + MyArray[i].Class + "</td></tr>");
          document.write("<td>" + MyArray[i].Div + "</td></tr></br>");
        }
      </script>
    </table>
  </div>
</body>
</html>

Nikhil Batra · Accepted Answer · 2015-07-20 08:05:07Z

There were few mistakes in your code:

You have used MyArray and myArray interchangeably, so make it consistent.
When you push item in array,do not use index with it. Correct syntax is : myArray.push(student1);

So your code becomes:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #div1
        {
           background:pink;
           width:100%;
           height:80%;
           padding:5%;
           border:1px solid black;

        }
        table,th,td {
            border:1px solid black;
            padding:1px;
        }
    </style>

</head>
<body>
    <div id="div1">
        <table>
            <script>
                var student1 = { Name: "Amol", rno: 1, Class: "MCA", Div: "A" };
                var student2 = { Name: "Sagar", rno: 2, Class: "MBA", Div: "B" };
                var student3 = { Name: "Bhushan", rno: 1, Class: "MMM", Div: "C" };
                var student4 = { Name: "Nachiket", rno: 1, Class: "MPM", Div: "A" };

                var myArray = [];
                myArray.push(student1);
                myArray.push(student2);
                myArray.push(student3);
                myArray.push(student4);

                //document.write("<tr><th>"+ Name+</th>"+
                //"<th>RollNumber</th>"
                //"<th>Class</th>"
                //"<th>Division</th>");
                //"</tr>"
                alert("p");
                for (var i = 0; i < myArray.length; i++) {

                    document.write("<tr><td>" + myArray[i].Name + "</td>");
                    document.write("<td>" + myArray[i].rno + "</td>");
                    document.write("<td>" + myArray[i].Class + "</td></tr>");
                    document.write("<td>" + myArray[i].Div + "</td></tr></br>");
                }
    </script>
        </table>

    </div>

</body>
</html>

See the working plunkr : "http://plnkr.co/edit/D3zEFzOPqJWLHOTd2KvN?p=preview"

Nikhil Aggarwal · Accepted Answer · 2015-07-20 08:00:19Z

1

You need to update

myArray[0].push(student1);
myArray[1].push(student2);
myArray[2].push(student3);
myArray[3].push(student4);

to

myArray.push(student1);
myArray.push(student2);
myArray.push(student3);
myArray.push(student4);

answered Jul 20, 2015 at 8:00

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to print an object array with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related