Wladi79 priority asked 1 year ago


Expected behavior Loading data into table from JSON at site startup and normal operation

Actual behavior Loading data into the table when the site starts, but action icons don't appear, and when you click on the "Add" button - all loaded fields disappear, but action buttons appear![

      document.addEventListener("DOMContentLoaded", function () {
        function insertDataToTable(tableId, data) {
            const table = document.querySelector(`#${tableId} tbody`);
            if (!table) {
                console.error(`Table with id ${tableId} not found!`);
                return;
            }
            for (const key in data) {
                const row = document.createElement("tr");

                const commCell = document.createElement("td");
                commCell.textContent = data[key].communication[0];
                row.appendChild(commCell);

                const seqCell = document.createElement("td");
                seqCell.textContent = data[key].sequence[0];
                row.appendChild(seqCell);

                const excCell = document.createElement("td");
                excCell.textContent = data[key].exception[0];
                row.appendChild(excCell);

                table.appendChild(row);
            }
        }

        fetch('data.json') 
            .then(response => {
                if (!response.ok) {
                    throw new Error("HTTP Error: " + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log(data)
                const jsonData = data
                for (const tableId in jsonData.data) {
                    insertDataToTable(tableId, jsonData.data[tableId]);
                }

            })
            .catch(error => {
                console.error(error);
            });
    });

Resources (screenshots, code snippets etc.) enter image description here


Kamila Pieńkowska staff answered 1 year ago


You need to use the update method to add asynchronous data. Here is example: https://mdbootstrap.com/docs/standard/data/datatables/#section-async-data

Also, any element added after page load must be manually initiated since auto-init happens on page load.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: Laptop
  • Browser: Electron
  • OS: Windows
  • Provided sample code: No
  • Provided link: No