I am attempting to create a table with JSON data, and my code runs error free, but when the code completes, no table is created on the page.
api Data returns data in this format
{"Product":"RST-9042","Quantity":121}{"Product":"LMN-1017-KN","Quantity":"0"}{"Product":"YZH-2117","Quantity":13}
What piece am I missing here?
btnSubmit.onclick = async function() {
const customerSelect = document.getElementById('customers');
const selectedCustomer = customerSelect.selectedOptions[0].value;
const intCustomer = parseInt(selectedCustomer);
if ([1, 2, 3].includes(Number(intCustomer))) {
await fetch(‘Ce.php?customer=' + intCustomer)
.then(async (result) => {
const apiData = result;
//console.log(wooData);
await generateTable(apiData);
if (result.status != 200) {
throw new Error("Bad Server Response");
}
return result.text();
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
}
async function generateTable(apiData) {
//Create a HTML Table element.
const table = document.createElement("TABLE");
table.border = "1";
//Get the count of columns.
const columnCount = apiData;
//Add the header row.
let row = table.insertRow(-1);
for (const i = 0; i < columnCount; i++) {
const headerCell = document.createElement("TH");
headerCell.innerHTML = apiData[i];
row.appendChild(headerCell);
}
//Add the data rows.
for (const i = 1; i < apiData.length; i++) {
row = table.insertRow(-1);
for (const j = 0; j < columnCount; j++) {
const cell = row.insertCell(-1);
cell.innerHTML = apiData[i][j];
}
}
const dvTable = document.getElementById("dvData");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}