Fetching Data from JSON and creating an HTML Table through Javascript - Not Working

Question

I'm trying to create a table populated by an external .JSON file through using JavaScript. It is not working. When the .JSON data was placed in the .JS code it worked, but once I used "fetch" to retrieve data externally it stopped working and does not display the details.

HTML

<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<p id="showData"></p>

JavaScript

fetch('about-us.json')
.then((response) => response.json())
.then((data) => {
    data.forEach(CreateTableFromJSON);
})
.catch((error) => {
    console.error('Error:', error);
});

function CreateTableFromJSON() {

    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price')
    var col = [];
    for (var i = 0; i < myBooks.length; i++) {
        for (var key in myBooks[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myBooks.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}

External .JSON File (about-us.json)

[
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}]

Answer 1

I had a little time on my hands so I rewrote your code which breaks down the separate steps to make headings, rows, and cells using map and join, and then uses a template string to piece it together. Basically you're just building up small parts of the final HTML as various strings that you combine.

const json='[{"Book ID":"1","Book Name":"Computer Architecture","Category":"Computers","Price":"125.60"},{"Book ID":"2","Book Name":"Asp.Net 4 Blue Book","Category":"Programming","Price":"56.00"},{"Book ID":"3","Book Name":"Popular Science","Category":"Science","Price":"210.40"}]';

// Cache the button, and add an event listener to
// it which calls the API (returns data after two seconds)
const button = document.querySelector('button');
button.addEventListener('click', fetchData, false);

// Mock API
function mockApi() {
  return new Promise(res => {
    setTimeout(() => res(json), 2000);
  });
}

// Calls the API, parses the json, then
// calls createTable with the data
function fetchData() {
  button.textContent = 'Loading...';
  button.disabled = true;
  mockApi()
    .then(res => JSON.parse(res))
    .then(createTable);
}

// `map` over the keys of first object
// in the array, and return a string of HTML
function getColumnHeadings(data) {
  return Object.keys(data[0]).map(key => {
    return `<td>${key}</td>`;
  }).join('');
}

// `map` over each object in the array,
// and return a string of HTML. It calls
// `getCells` on each object
function getRows(data) {
  return data.map(obj => {
    return `<tr>${getCells(obj)}</tr>`
  }).join('');
}

// `map` over the values of an object
// and return a string of HTML
function getCells(obj) {
  return Object.values(obj).map(value => {
    return `<td>${value}</td>`;
  }).join('');
}

function createTable(data) {
  
  // Get the headings, and the rows
  const headings = getColumnHeadings(data);
  const rows = getRows(data);

  // Create an HTML string
  const html = `
    <table>
      <tbody>
        <tr class="headings">${headings}</tr>
        ${rows}
      </tbody>
    </table>
  `

  // Add the string to the DOM
  document.body.insertAdjacentHTML('beforeend', html);

}

table { border-collapse: collapse; border: 1px solid #565656; margin-top: 1em; width: 100%; }
td { padding: 0.6em 0.3em; border: 1px solid #dfdfdf; }
.headings { font-weight: 700; background-color: #dfdfdf; }
button:hover { cursor: pointer; }

<button>Build table</button>