Remove "undefined" rows from HTML table Javascript

December 15, 2022

I have a HTML table made from JS, the issue is I have multiple rows in the output that are filled with "undefined" although there is no correlating information in my JSON (where the data comes from) to give this output. Therefore, they need deleting.

JS code:

const requestUrl9 = 'https://api.npoint.io/f300bfc0e63600a09235';
const requestJSON9 = async url => {

  const response9 = await (await fetch(url)).json();
  const limit9 = Math.max(...Object.keys(response9.senator)) + 1;
  for(let index9 = 0; index9 < limit9; index9++)
  {
      let newRow9 = rowTemplate9.cloneNode(true);
      newRow9.id = '';
      newRow9.querySelector('.transaction_date').innerHTML = response9.transaction_date[index9];
      newRow9.querySelector('.ticker').innerHTML = response9.ticker[index9];
      newRow9.querySelector('.asset_description').innerHTML = response9.asset_description[index9];
      newRow9.querySelector('.asset_type').innerHTML = response9.asset_type[index9];
      newRow9.querySelector('.type').innerHTML = response9.type[index9];
      newRow9.querySelector('.amount').innerHTML = response9.amount[index9];
      newRow9.querySelector('.party').innerHTML = response9.party[index9];
      newRow9.querySelector('.state').innerHTML = response9.state[index9];
      newRow9.querySelector('.industry').innerHTML = response9.industry[index9];
      newRow9.querySelector('.senator').innerHTML = response9.senator[index9];
      newRow9.querySelector('.disclosure_date').innerHTML = response9.disclosure_date[index9];
      rowTemplate9.parentNode.appendChild(newRow9);
  }
  rowTemplate9.parentNode.removeChild(rowTemplate9); // Tidy up and remove the template
}
requestJSON9(requestUrl9);

HTML code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
  <table id="content-table_page6" style="color: rgb(16, 16, 16); font-size: 15px;">
    <tr class="toptable6">
        <th>Transaction Date</th>
        <th>Ticker</th>
        <th>Asset Description</th>
        <th>Asset Type</th>
        <th>Type</th>
        <th>Amount ($)</th>
        <th>Party</th>
        <th>State</th>
        <th>Industry</th>
        <th>Senator</th>
        <th>Disclosure Date</th>
    </tr>
    <tr id='rowTemplate9'>
      <td class='transaction_date' style="text-align:center; font-size: 10px;"></td>
      <td class='ticker' style="text-align:center; font-size: 10px;"></td>
      <td class='asset_description' style="text-align:center; font-size: 10px;"></td>
      <td class='asset_type' style="text-align:center; font-size: 10px;"></td>
      <td class='type' style="text-align:center; font-size: 10px;"></td>
      <td class='amount' style="text-align:center; font-size: 10px;"></td>
      <td class='party' style="text-align:center; font-size: 10px;"></td>
      <td class='state' style="text-align:center; font-size: 10px;"></td>
      <td class='industry' style="text-align:center; font-size: 10px;"></td>
      <td class='senator' style="text-align:center; font-size: 10px;"></td>
      <td class='disclosure_date' style="text-align:center; font-size: 10px;"></td>
    </tr>
</table>


  <script src="Senator_insider.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script>
    document.querySelectorAll("td").forEach((item) => {
      if (item.textContent.includes("undefined")) {
        item.parentElement.remove();
        }
    });

  </script>
</body>
</html>

The last piece of JS code on my HTML script is the attempt to remove rows if they are undefined. I’m not sure if I should include new code in this to give the correct output, or whether I need to change the actual JS code when creating the table.

>Solution :

Try with this loop

const requestUrl9 = 'https://api.npoint.io/f300bfc0e63600a09235';
const requestJSON9 = async url => {
const response9 = await (await fetch(url)).json();
for(var i in response9.senator){
  let newRow9 = rowTemplate9.cloneNode(true);
  newRow9.id = '';
  newRow9.querySelector('.transaction_date').innerHTML = response9.transaction_date[i];
  newRow9.querySelector('.ticker').innerHTML = response9.ticker[i];
  newRow9.querySelector('.asset_description').innerHTML = response9.asset_description[i];
  newRow9.querySelector('.asset_type').innerHTML = response9.asset_type[i];
  newRow9.querySelector('.type').innerHTML = response9.type[i];
  newRow9.querySelector('.amount').innerHTML = response9.amount[i];
  newRow9.querySelector('.party').innerHTML = response9.party[i];
  newRow9.querySelector('.state').innerHTML = response9.state[i];
  newRow9.querySelector('.industry').innerHTML = response9.industry[i];
  newRow9.querySelector('.senator').innerHTML = response9.senator[i];
  newRow9.querySelector('.disclosure_date').innerHTML = response9.disclosure_date[i];
  rowTemplate9.parentNode.appendChild(newRow9);
}
  rowTemplate9.parentNode.removeChild(rowTemplate9); 
}
requestJSON9(requestUrl9);

Your code is not good because the index of the last senator is 616 (
"Rick Scott") and the index before him is 554 ("Thomas R. Carper")