HTML returning undefined value (td)-CodePudding

I am trying to return the values of dynamicTable into a displayed table. i was following a tutorial and have gone wrong somewhere. when i put my data into the table the console logs:

undefinedundefinedundefinedundefinedundefinedundefined

anyone know where i have gone wrong?

<script>
    let sortDirection = false;
    let dynamicTable = [
        { Filename: '7zip', Size: 40, Dateadded: '21/04/2003'},
        { Filename: '7zipTwt', Size: 90, Dateadded: '21/07/2020'}
    ];
    
    window.onload = () => {
        loadTableDt(dynamicTable);
    };
    
    function loadTableDt(dynamicTable) {
        const tableBody = document.getElementById('tableDt');
        let dataHtml = '';
    
        for(let data of dynamicTable) {
            dataHtml  = `<tr><td>${dynamicTable.Filename}</td><td>${dynamicTable.Size}</td><td>${dynamicTable.Dateadded}</td></tr>`;
        }
        console.log(dataHtml)
        tableBody.innerHTML = dataHtml;
    
    }
</script>
<body>
    <form>
        <h1>OceanDrive</h1>
    </form>
    <table>
        <thead>
            <tr>
                <th>File name</th>
                <th>Size</th>
                <th>Date added</th>
            </tr>
        </thead>
        <tbody id="tableDt"></tbody>

CodePudding user response：

After reviewing your code I think that I found the cause of the 'undefined' return. You should change the names of the following elements:

dynamicTable.File_Name to dynamicTable.Filename
dynamicTable.SizeF to dynamicTable.Size
dynamicTable.Date_added to dynamicTable.Dateadded

It should remove your error and give you the answer that you were looking for.

I hope this will help you, let me know if this works for you.

Dorian

CodePudding user response：

You'are using wrong properties inside loadTableDt(). For example you use File_name but dynamicTable contains Filename. You have wrong properties for all cases here :)

CodePudding user response：

You are referencing the wrong property names in the loadTableDt function as pointed out in a comment. You can, as an alternative to concatenating the table rows as strings simply call insertAdjacentHTML ftom within the loop - it might be more efficient if there are lots of dynamic rows being added. The name of the argument supplied to loadTableDt can be completely different to the name of the actual variable - it can help to keep argument names and variables different.

window.onload = () => {
  let sortDirection = false;
  let dynamicTable = [{
      Filename: '7zip',
      Size: 40,
      Dateadded: '21/04/2003'
    },
    {
      Filename: '7zipTwt',
      Size: 90,
      Dateadded: '21/07/2020'
    }
  ];


  function loadTableDt(data) {
    const tableBody = document.querySelector('tbody');
    for( let obj of data ) {
      tableBody.insertAdjacentHTML('beforeend', `<tr>
        <td>${obj.Filename}</td>
        <td>${obj.Size}</td>
        <td>${obj.Dateadded}</td>
      </tr>`);
    }
  }


  loadTableDt(dynamicTable);
};

<form>
  <h1>OceanDrive</h1>
</form>

<table>
  <thead>
    <tr>
      <th>File name</th>
      <th>Size</th>
      <th>Date added</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>