CODEWITHSUNDEEP
javascriptjquery
Pete
Pete

Reputation: 170

Dynamically Creating HTML table from JS array with jQuery

I would like to dynamically create an HTML table using jQuery. I have a JS array filled with data.

I have tried the following and it doesn't work, nothing shows up. What am I doing wrong?

Javascript code

for(var i = 0; i < cycleArr.length; i++) {
    var strTable = "<tr>"
    for(var j = 0; j < cycleArr[i]; j++) {
        var strTable = strTable + "<td>";
        var strTable = strTable + cycleArr[i];
        var strTable = strTable + "</td>";
    }
    var strTable = strTable + "</tr>";
}
$('#model_table').append(strTable);

HTML code

<div id="model_table">

</div>

Upvotes: 0

Views: 2552

Answers (2)

zms
zms

Reputation: 109

I put the code into one html file. Below is the code. Take note, that you need to allow the:

strTable - continue looping by adding += . Just simplify var strTable = strTable + "" from your code above.

The idea here is, you have column and row. First you'll loop the direction from left to right, then if the row is completed, you need to go to next row.

<div id="model_table">&npsp;</div> <!--  result here -->

<script type="text/javascript">   
   var cycleArr = [[1,2,3,4,5], [6,7,8,9,10]];
   var strTable = '<table border="1" cellpadding="5">';
   for(var i = 0; i < cycleArr.length; i++) {
      strTable += "<tr>";
      for(var j = 0; j < cycleArr[i].length; j++) { 
         strTable += '<td>' + cycleArr[i][j] + '</td>'; 
       }
      strTable += "</tr>";
    }
   strTable += '</table>'; 

 document.getElementById('model_table').innerHTML = strTable;
</script>

Upvotes: 0

CherryDT
CherryDT

Reputation: 29011

Assuming that cycleArr is a 2-dimensional array (for everything else this code wouldn't make a lot of sense, but correct me if I'm wrong), I found the following issues with your code:

  • You are comparing j with cycleArr[i] which is probably an array, instead of cycleArr[i].length.
  • In the inner loop you are accessing cycleArr[i] instead of cycleArr[i][j].
  • You are overwriting your strTable variable in each iteration of the outer loop because you are assigning <tr> instead of appending it.
  • You are declaring your variable strTable over and over again. It should be declared only once.
  • You are inserting <tr>s and <td>s into a <div> instead of a <table>. While this may be intended, I assumed it is not.

Here is a working version of your code:

var cycleArr = [['a', 'b', 'c'], ['d', 'e', 'f']];

var strTable = "";
for(var i = 0; i < cycleArr.length; i++) {
  strTable += "<tr>"
  for(var j = 0; j < cycleArr[i].length; j++) {
    strTable += "<td>";
    strTable += cycleArr[i][j];
    strTable += "</td>";
  }
  strTable += "</tr>";
}
$('#model_table').append(strTable);
table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="model_table">

</table>

Also, you wrote that you have a "JSON array", but it would appear you have a JS (JavaScript) array. A JSON array would be a string which encodes an array (you wouldn't be able to iterate over it before parsing it which makes it no longer JSON). I took the liberty to correct your post to avoid confusion.

Upvotes: 1

Related Questions