Javascript Table In Multi Dimensional Array

Question

Hello i need help with my code i need to create a table in my multidimensional array i can't get any help please give solution with explanation i am newbie, here's my code.

    <script>
   var students = Array(

   Array(1001,"Mac","mac@gmail.com", "macali1317"),
   Array(1002,"Hellen","hellen@gmail.com", "hellen1317"),
   Array(1003,"Andrew","andrew@gmail.com", "andrew1317")
   );
  document.write("Student ID " + students[0][0] , "<br>Student Name " + students[0][1] , "<br>Student Email " + students[0][2], "<br>Student pass " + students[0][3]);
  document.write("<br>")
  document.write("<br>")
  document.write("<br>")
  document.write("Student ID " + students[1][0] , "<br>Student Name " + students[1][1] , "<br>Student Email " + students[1][2], "<br>Student pass " + students[1][3]);
  document.write("<br>")
  document.write("<br>")
  document.write("<br>")
  document.write("Student ID " + students[2][0] , "<br>Student Name " + students[2][1] , "<br>Student Email " + students[2][2], "<br>Student pass " + students[2][3]);

Thanks in advance.

yea you're right, is it a bad thing? can't i convert this into table?. — Mac, Jun 30 '20 at 08:57

score 0 · Answer 1 · answered Jun 30 '20 at 10:03

There's a good reference for JS arrays at MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

A two dimensional array is simply an array of arrays, so it would be defined like this:

var students = [
  [1001,"Mac","mac@gmail.com", "macali1317"],
  [1002,"Hellen","hellen@gmail.com", "hellen1317"],
  [1003,"Andrew","andrew@gmail.com", "andrew1317"]
];

Rather than all that repeated code to echo out the array you can loop over each element using forEach:

students.forEach(element => document.write(
  "Student ID " + element[0] + 
  "<br>Student Name " + element[1] + 
  "<br>Student Email " + element[2] + 
  "<br>Student pass " + element[3] +
  "<br><br><br>"
));

If you wanted a proper HTML table rather than a list, then you could output some markup like this:

document.write("<table border=1><tr><th>ID</th><th>name</th><th>email</th><th>pass</th>");
students.forEach(element => document.write(
  "<tr><td>" + element[0] +      
  "</td><td>" + element[1] +    
  "</td><td>" + element[2] +    
  "</td><td>" + element[3] +
  "</td></tr>"
)); 
document.write("</table>");

Generally speaking, there are more efficient ways of updating a webpage than document.write - there's a long and ancient thread here : Why is document.write considered a "bad practice"?

score 0 · Answer 2 · answered Jun 30 '20 at 10:32

I basically found the solution by an expert thanks for your answers guys much appreciated. My Code Now:

 var students = Array(

 Array("Student ID" , "Student ID" , "Student Email" , "Student Password"),
 Array(1001,"Mac","Mac@gmail.com", "macali1317"),
 Array(1002,"Hellen","hellen@gmail.com", "hellen1317"),
 Array(1003,"Andrew","andrew@gmail.com", "andrew1317")
      );
 document.write("<table border= '1px' cellspacing='1' >");


 for( var a = 0; a < 4; a++){
 document.write("<tr>");

 for( var b = 0; b < 4; b++){

document.write( "<td>" + students[a][b] + "</td>")
 }
document.write("</tr>");
 }
document.write("</table>")

Javascript Table In Multi Dimensional Array

2 Answers2