Printing an array of arrays from value input in html table - html

Question

I am trying to print a 2-d array that i get from an http request to the variable value using this code
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
<script>
var x ="", i;
var y ="", j;
for (i=0; i<value.length; i++) {
x ="<tr>" +
for (j=0; j<3; j++){
y = "<td>" + {{ value[i][j] }} + "</td>";
}
+ "</tr>";
}
</script>
</table>
Any ideas why it isn't working? :P

Answer 1

Tag <script> not displayed in any way, you need to use JavaScript methods for DOM manipulation
const values = [
["name1", "age1", "school1"],
["name2", "age2", "school2"],
];
const tbody = document.querySelector("tbody");
for (let i = 0; i < values.length; i++) {
const tr = document.createElement("tr");
const fields = values[i];
for (let j = 0; j < fields.length; j++) {
const field = fields[j];
const td = document.createElement("td");
td.textContent = field;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
<table style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
</thead>
<tbody></tbody>
</table>

Answer 2

You are trying to concatenate string with a for loop. You cannot do that. Also, declare i and j variables inside the for loop so they are automatically removed when the loop is done. You do not need the y variable because you can create a long string as x and then use it as innerHTML somewhere. Lastly, the value array was incorrectly used. {} is used to create an object. For example var b = {}; When you want to actually use the object, you refer to it by its name, but you said you have an array already.
<script>
var x ="";
for (var i=0; i<value.length; i++) {
x +="<tr>";
for (var j=0; j<value[i].length; j++){
x += "<td>" + value[i][j] + "</td>";
}
x += "</tr>";
}
//use your output x variable here
</script>