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>

Answer 1

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 "

Answer 2

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);

How to print an object array with JavaScript

Question

2 answers

solution1
2 2015-07-20 08:05:07

solution2
1 2015-07-20 08:00:19

How to print an object array with JavaScript

Question

2 answers

solution1 2 2015-07-20 08:05:07

solution2 1 2015-07-20 08:00:19

solution1
2 2015-07-20 08:05:07

solution2
1 2015-07-20 08:00:19