JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<body>
  <input type="button" id="data-btn" value="Test Output" />
  <p id="showData"></p>
</body>

JavaScript

const jsonArr = [{
    "type": "paragraph",
    "subtype": "p",
    "label": "Paragraph"
  },
  {
    "type": "paragraph",
    "subtype": "p",
    "label": "Paragraph"
  },
  {
    "type": "number",
    "required": false,
    "label": "Telephone Number",
    "className": "form-control",
    "name": "number-1584622107039",
    "step": 5,
    "userData": ["test"]
  },
  {
    "type": "textarea",
    "required": false,
    "label": "Details of Project",
    "className": "form-control",
    "name": "textarea-1584622084505",
    "subtype": "textarea",
    "rows": 8,
    "userData": ["Detail's of the project go here. Hahaha"]
  },
  {
    "type": "text",
    "required": false,
    "label": "Organisation Name",
    "className": "form-control",
    "name": "text-1584622090644",
    "subtype": "text",
    "userData": ["my organisation"]
  }
]




function CreateTableFromJSON(arr, headerArray) {
  var myData = arr.filter()

  // values for headers

  var col = [];
  for (var i = 0; i < myData.length; i++) {
    for (var key in myData[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  // the table
  var table = document.createElement("table");

  // create headers

  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 rows
  for (var i = 0; i < myData.length; i++) {
    tr = table.insertRow(-1);
		console.log(table)
   /*  if (i === indexRow) {
      tr.style.display = 'none'
    } */
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = myData[i][col[j]];
    }
  }
  console.log(table)
  // Output
  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

document.getElementById('data-btn').addEventListener('click', () => CreateTableFromJSON(jsonArr, [0, 7]));