How do I formulate my for-loop code to insert values in specific html table cells?

Question

I am having issues inserting values from an object into a dynamically generated HTML table.

Find below my simple HTML code:

<table id="table" border="1">
    <tr>
        <th>Number</th>
        <th>Amount</th>
        <th>Status</th>
    </tr>
</table>  

I am dynamically populating the table above using values from an object. The object is generated from saved values in the localStorage .

Find inline my javascript code along with my comments and explanation:

var array = JSON.parse(localStorage.getItem('transactionData'));
console.log(array);

The console.log(array) as seem above, correctly yields:

table = document.getElementById("table");

for(var i = 0; i < array.length; i++)
{
  console.log("Number of transactions: " +array.length);
  var newRow = table.insertRow(table.length);

  var x;
    for (x in array) 
    {
      var cell = newRow.insertCell(x);
      cell.innerHTML += array[x].payersNumber;

   }
}

My main issue seems to be within the scope of the second for-loop. I'd like for the code here to populate every row in the table with (in this order) the Number, Amount then finally the Status .

The code in the second for-loop above erroneously fills in every cell in the table with phone numbers, and also adds additional columns as seen in the image below

Kindly help me understand how I can correctly formulate my code to populate every row with the Number, Amount and the Status values from the object.

Looking forward to your help.

Answer 1

As you suspected the problem lies here:

    for (x in array) 
    {
      var cell = newRow.insertCell(x);
      cell.innerHTML += array[x].payersNumber;

   }

According to the structure of your array each element is an object with six keys - your table just has three rows though - so it adds two additional cells which get populated from a non-existing entry in the object which makes it undefined .

I'd recommend adding the keys you want to be displayed inside the table in an array like (reflecting the order of your table):

var keys=["payersNumber","amount","paymentStatus"];

This way you can iterate over the keys inside the for-loop and populate the correct cells.

Here's an example:

 var array = [{ amount: 12, payersNumber: 1245, paymentStatus: "okay" }, { amount: 24, payersNumber: 3345, paymentStatus: "okay" }, { amount: 45, payersNumber: 4534, paymentStatus: "not okay" }]; table = document.getElementById("table"); var currentTransaction; var keys = ["payersNumber", "amount", "paymentStatus"]; for (var i = 0; i < array.length; i++) { console.log("Number of transactions: " + array.length); var newRow = table.insertRow(table.length); currentTransaction = array[i]; for (var b = 0; b < keys.length; b++) { var cell = newRow.insertCell(b); cell.innerText = currentTransaction[keys[b]]; } } 

 <table id="table" border="1"> <tr> <th>Number</th> <th>Amount</th> <th>Status</th> </tr> </table> 

Answer 2

for(x in array), you are accessing the array, not the objects inside the array.

Try something like:

  var table = document.getElementById("table");

  console.log("Number of transactions: " + array.length);

  for (var i = 0; i < array.length; i++) {
    var newRow = table.insertRow(table.length);
    var currentTransactionLength = Object.keys(array[i]).length;
    var currentTransactionObject = array[i];

    for (var x = 0; x < currentTransactionLength; x++) {
      var cell = newRow.insertCell(x);
      cellContents = currentTransactionObject[Object.keys(currentTransactionObject)[x]];
      cell.innerHTML += cellContents;
    }
  }

This way you are accessing the array on the first loop and then each object of that array on the second loop.