I get "no data in the table"

Question

II'm having a problem setting the body in the dynamic content table.

I get no data in the table.

In fact, thead has been set correctly, but most likely the problem is the tbody; the header of the columns is perfectly displayed, but the content is not.

Can anyone kindly help me?

var allart = JSON.parse(this.responseText);
                console.log(allart);
                var tbdy = document.createElement('tbody');
                allart.Items.forEach(function (item) {               
                    let child = document.createElement("tr");
                    child.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.titolo}</td>
                    <td>${item.marca}</td>
                    <td>${item.immagine}</td> 
                    <td>${item.sezione}</td>
                    <td>${item.data}</td>
                    `;
                    table.appendChild(child);
                })
                tbdy.appendChild(tr);
                table.appendChild(tbdy);
                
$(document).ready(function () {
            $('#my-table').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [5, 10, 20, 50, 100, 200, 500],
            });
            $('.dataTables_length').addClass('bs-select');
        });

<table id="my-table" class="row-border hover" width="90%">
        <thead>
            <tr>
                <th class="th-sm">Id</th>
                <th class="th-sm">Titolo</th>
                <th class="th-sm">Marca</th>
                <th class="th-sm">Immagine</th>
                <th class="th-sm">Sezione</th>
                <th class="th-sm">Data</th>

            </tr>
        </thead>

    </table>

allart is:

0: {title: 'Moto Guzzi V100 Mandello, the queen of EICMA 2021', date: '27 / 11/2021 ', brand:' Guzzi ', section:' In evidence ', id:' 123456 ',…}
1: {title: "Bimota: an adventure based on Tesi will arrive", date: '04 / 12/2021 ', brand:' Bimota ', section:' In evidence ', id:' 135623 ',…}
2: {title: "Chaleco López inaugurates' his' museum", date: '22 / 01/2022 ', brand:' Chaleco ', section:' On the front page ', id:' 256346 ',…}

Answer 1

In your loop, your adding the row to the table. I guess you want to add it to the body.

Try this.

var allart = JSON.parse(this.responseText);
                console.log(allart);
                var tbdy = document.createElement('tbody');
                allart.Items.forEach(function (item) {               
                    let child = document.createElement("tr");
                    child.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.titolo}</td>
                    <td>${item.marca}</td>
                    <td>${item.immagine}</td> 
                    <td>${item.sezione}</td>
                    <td>${item.data}</td>
                    `;
                    // table.appendChild(child);
                    // add row to table body
                    tbdy.appendChild(tr);
                })
                // we dont need this
                // tbdy.appendChild(tr);
                table.appendChild(tbdy);
                
$(document).ready(function () {
            $('#my-table').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [5, 10, 20, 50, 100, 200, 500],
            });
            $('.dataTables_length').addClass('bs-select');
        });