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.

obscure · Accepted Answer · 2019-07-30 23:58:48Z

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>

edited Jul 30, 2019 at 23:58

answered Jul 30, 2019 at 23:42

obscure

13k2 gold badges19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SirBT Over a year ago

I hope you can help out with this? stackoverflow.com/questions/57322097/…

plinkplink · Accepted Answer · 2019-07-31 00:00:06Z

1

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.

answered Jul 31, 2019 at 0:00

plinkplink

9161 gold badge7 silver badges10 bronze badges

1 Comment

SirBT Over a year ago

Thanks! your solution works, however not sorted according to the <th> headers: Number, Amount and status. Is there any way to sort & filter the objects in the second loop?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related