1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:48 pm May 20, 2026

Forum Moderators: open

Message Too Old, No Replies

Trying to fill a html table from javascript object

         

yas16012017

2:34 pm on Nov 16, 2023 (gmt 0)



i have this code :

I don't understand why the rows did not created and filled with data in the html table, please give me where is the problème in this code? 

<head>
  <title>Example</title>
</head>
<body>
    <table id="table">
      <thead>
        <tr>
          <th>Matricule</th>
          <th>Date Exploit</th>
          <th>Num RUB</th>
          <th>Lib RUB</th>
          <th>Date Début</th>
          <th>Date Fin</th>
          <th>Montant Mois</th>
          <th>Taux</th>
          <th>Base</th>
        </tr>
      </thead>
      <tbody id="tableBody">
        <!-- Datas will be uploaded here -->
      </tbody>
    </table>
     <script>
      document.addEventListener('DOMContentLoaded', function () {
      async function loadRUBData(limit, offset, month, year) {
 
      // Hardcoded data for testing
      const rubData = [{ matricule: '123', dateexpl: '2023-09-01', numrub: '100', librub: 'Test', datedeb: '2023-09-01', datefin: '2023-09-30', montantmois: 1000, taux: 5, base: 500 }];
      const tableBody = document.querySelector("#tableBody");
      tableBody.innerHTML = "";
      for (const entry of rubData) {
      const row = document.createElement("tr");
      row.innerHTML = `
      <td>${entry.matricule}</td>
      <td>${entry.dateexpl}</td>
      <td>${entry.numrub}</td>
      <td>${entry.librub}</td>
      <td>${entry.datedeb}</td>
      <td>${entry.datefin}</td>
      <td>${entry.montantmois}</td>
      <td>${entry.taux}</td>
      <td>${entry.base}</td>`;
      tableBody.appendChild(row);
      }
      }
      }  
        const limit = 10//${request.getAttribute("limit")};
        const offset = 0//${request.getAttribute("offset")};
        const month = '09'//${request.getAttribute("month")};
        const year = '2023'//${request.getAttribute("year")};
        loadRUBData(limit, offset, month, year);
      });
     </script> 
</body>
</html>

the Object data rubData contain data but not filled in the table, thank you for your time

not2easy

2:50 pm on Nov 16, 2023 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Hi yas16012017 and welcome to WebmasterWorld [webmasterworld.com]

Sorry, I'm not much help with js. I don't know whether this is the entire test page or just a part, but your code has a closing tag for </html> but no opening tag. That would prevent processing.

yas16012017

3:04 pm on Nov 16, 2023 (gmt 0)



you are right i forgot a oening tag sorry but the perpose of my question is how to fill this table with data from javascript object as you can see in example code, i need help to explain me where is the problem

not2easy

3:10 pm on Nov 16, 2023 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



There are plenty of people who are helpful with js around here, it may take time and patience. ;)

yas16012017

3:20 pm on Nov 16, 2023 (gmt 0)



Thank you so much i will be patient

Fotiman

5:02 pm on Nov 16, 2023 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You have 1 too many closing curly braces after you define the row.innerHTML, causing a syntax error. Remove one of those braces and it will work.

yas16012017

9:38 am on Nov 19, 2023 (gmt 0)



you are right but i removed those braces and it's the same no display data in table : 


<html>
<head>
  <title>Example</title>
</head>
<body>
  <table id="table">
    <thead>
      <tr>
        <th>Matricule</th>
        <th>Date Exploit</th>
        <th>Num RUB</th>
        <th>Lib RUB</th>
        <th>Date Début</th>
        <th>Date Fin</th>
        <th>Montant Mois</th>
        <th>Taux</th>
        <th>Base</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <!-- Datas will be uploaded here -->
    </tbody>
  </table>
  <script>
    document.addEventListener('DOMContentLoaded', async function () {
      // Hardcoded data for testing
      const rubData = [
        { matricule: '123', dateexpl: '2023-09-01', numrub: '100', librub: 'Test', datedeb: '2023-09-01', datefin: '2023-09-30', montantmois: 1000, taux: 5, base: 500 }
      ];

      const tableBody = document.querySelector("#tableBody");
      tableBody.innerHTML = "";

      for (const entry of rubData) {
        const row = document.createElement("tr");
        row.innerHTML = `
          <td>${entry.matricule}</td>
          <td>${entry.dateexpl}</td>
          <td>${entry.numrub}</td>
          <td>${entry.librub}</td>
          <td>${entry.datedeb}</td>
          <td>${entry.datefin}</td>
          <td>${entry.montantmois}</td>
          <td>${entry.taux}</td>
          <td>${entry.base}</td>`;
        tableBody.appendChild(row);
      }
    });
  </script>
</body>
</html>

yas16012017

9:47 am on Nov 20, 2023 (gmt 0)



it seems that netbeans doesn't execute this page properly, i don't no why but i think there is a probleme with javascript and netbeans, because this simple page execute normally with call simple browser chrome
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:48 pm May 20, 2026