JSON-Powered Responsive Table with Semantics Retained by ARIA

            
              // Verify the JSON is JSON
// https://jsonformatter.curiousconcept.com/
// Minify the JSON for use below
// https://www.cleancss.com/json-minify/
// Minify the HTML node
// https://www.willpeavy.com/minifier/
// Escape the HTML for the JSON
// https://www.freeformatter.com/json-escape.html
var tableData =
  '{"items":[{"table":"BooksJSON","caption":"Books I May or May Not Have Read","row":[{"Author":"Miguel De Cervantes","Title":"The Ingenious Gentleman Don Quixote of La Mancha","Year":"1605","ISBN-13":"9783125798502","ISBN-10":"3125798507"},{"Author":"Mary Shelley","Title":"Frankenstein; or, The Modern Prometheus","Year":"1818","ISBN-13":"9781530278442","ISBN-10":"1530278449"},{"Author":"Herman Melville","Title":"Moby-Dick; or, The Whale","Year":"1851","ISBN-13":"9781530697908","ISBN-10":"1530697905"},{"Author":"Emma Dorothy Eliza Nevitte Southworth","Title":"The Hidden Hand","Year":"1888","ISBN-13":"9780813512969","ISBN-10":"0813512964"},{"Author":"F. Scott Fitzgerald","Title":"The Great Gatsby","Year":"1925","ISBN-13":"9780743273565","ISBN-10":"0743273567"},{"Author":"George Orwell","Title":"Nineteen Eighty-Four","Year":"1948","ISBN-13":"9780451524935","ISBN-10":"0451524934"}]}]}';

function ParseJSON(data, elmID, nodeType) {
  try {
    var JSONdata = JSON.parse(data);

    var divContainer = document.getElementById(elmID);
    divContainer.innerHTML = "";

    var filteredNodes = JSONdata.items;

    for (var a = 0; a < filteredNodes.length; a++) {
      var json = filteredNodes[a];
      if (json.table === nodeType) {

        // data grid
        if (json.caption !== undefined && json.row !== undefined) {
          var table = document.createElement("table");
          var caption = document.createElement("caption");
          caption.innerHTML = json.caption;
          caption.setAttribute('id', elmID+'Caption');
          table.appendChild(caption);
          table.setAttribute('id', json.table);
          table.setAttribute('role','table');

          var tableHead = Object.keys(json.row[0]);
          var tableRows = Object.values(json.row);

          var tr = table.insertRow(-1);
          tr.setAttribute('role','row');
          for (var i = 0; i < tableHead.length; i++) {
            var th = document.createElement("th");
            th.setAttribute('role','columnheader');
            th.innerHTML = tableHead[i];
            tr.appendChild(th);
          }

          for (var j = 0; j < tableRows.length; j++) {
            var tableCells = Object.values(json.row[j]);
            var tr = table.insertRow(-1);
            tr.setAttribute('role','row');
            for (var k = 0; k < tableCells.length; k++) {
              var tabCell = tr.insertCell(-1);
              tabCell.setAttribute('role','cell');
              tabCell.innerHTML = tableCells[k];
            }
          }
        }

        // build it
        if (json.caption !== undefined && json.row !== undefined) {
          divContainer.appendChild(table);          
        }
      }
    }
  } catch (e) {
    console.log("ParseJSON(): " + e);
  }
}

function ResponsiveCellHeaders(elmID) {
  try {
    var THarray = [];
    var table = document.getElementById(elmID);
    var ths = table.getElementsByTagName("th");
    for (var i = 0; i < ths.length; i++) {
      var headingText = ths[i].innerHTML;
      THarray.push(headingText);
    }
    var styleElm = document.createElement("style"),
      styleSheet;
    document.head.appendChild(styleElm);
    styleSheet = styleElm.sheet;
    for (var i = 0; i < THarray.length; i++) {
      styleSheet.insertRule(
        "#" +
          elmID +
          " td:nth-child(" +
          (i + 1) +
          ')::before {content:"' +
          THarray[i] +
          ': ";}',
        styleSheet.cssRules.length
      );
    }
  } catch (e) {
    console.log("ResponsiveCellHeaders(): " + e);
  }
}

ParseJSON(tableData, "BookTable", "BooksJSON");
ResponsiveCellHeaders('BooksJSON');