display json data in html table currently just shows directory-CodePudding

This is my first question on my first project. I'm struggling to display my make any progress can someone point me in the right direction, not sure if its my code or set as newbie and a friend set up my html doc

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Foil Checker</TITLE>
    <META http-equiv="X-UA-Compatible" content="IE=edge">
    <META http-equiv='cache-control' content='no-cache'>
    <META http-equiv='expires' content='0'>
    <META http-equiv='pragma' content='no-cache'>
    <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid,i5SPCChart,i5Command"></SCRIPT>
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    
   

  
</HEAD>
<BODY>
    <main>
    <table>
        <thead>
            <th>Stack Id</th>
            <th>PO Number</th>
            <th>Material</th>
            <th>Describtion</th>
            <th>PO QTY</th>
            <Th>Stack Qty</Th>
            <th>Extract time</th>
        </thead> 
        <Tbody id="data-output"> 
            
        </Tbody>
    </table>

    </main>
</BODY>
<script type="text/javascript" src="main.js"></script>

</HTML>

```JS

var data = fetch('./Data.json') .then(function(responce){ return responce.json(); })

.then(function(data){ let placeholder = document.querySelector("#data-output"); let out = ""; for(let product of products){ out = <tr> <td>${product.STACKID}</td> <td>${product.PONUMBER}</td> <td>${product.MATERIAL}</td> <td>${product.DESCRIPTIONTEXT}</td> <td>${product.POQTY}</td> <td>${product.STACKQTY}</td> <td>${product.EXTRACTTIME}</td> </tr>; }

placeholder.innerHTML = out;

});


I just seems to get a index out of the directory

CodePudding user response：

I don't have your full code so cannot really run it locally, but some obvious fixes for the loop,

 for(let index of products){
       let product = products[index];
       out  = `
          <tr>
             <td>${product.STACKID}</td>
             <td>${product.PONUMBER}</td>
             <td>${product.MATERIAL}</td>
             <td>${product.DESCRIPTIONTEXT}</td>
             <td>${product.POQTY}</td>
             <td>${product.STACKQTY}</td>
             <td>${product.EXTRACTTIME}</td>
          </tr>
       `;
    }

CodePudding user response：

you need to wait for the fetch promise where you're getting the data

const fetchTableDetails = async () => {
    // Wait for data to be fetched
    const data = await fetch('./Data.json').then(response => response.json())
    // ...
    // Other data manipulation

}

fetchTableDetails()