fetch("players.json")
.then((response) => response.json())
.then((data) => {
// Parse and display the data in the table
populateTable(data);
})
.catch((error) => console.error("Error fetching the JSON data:", error));
function populateTable(data) {
const tableHeader = document.getElementById("tableHeader");
const tableBody = document.getElementById("tableBody");
// Extract headers from the second element of the data array
const headers = Object.keys(data[1]);
// Create table header row
headers.forEach((header) => {
const th = document.createElement("th");
th.textContent = header;
tableHeader.appendChild(th);
});
// Create table rows for each player
data.forEach((player, index) => {
// Skip the first two elements as they are not player data
if (index > 1) {
const tr = document.createElement("tr");
headers.forEach((header) => {
const td = document.createElement("td");
td.textContent = player[header] !== undefined ? player[header] : "";
tr.appendChild(td);
});
tableBody.appendChild(tr);
}
});
// Initialize DataTable
$("#playersTable").DataTable();
}