JAVASCRIPT

Dynamically Generated Table

//Creating the table
function CreateTableFromJSON() {
	console.log('CreateTableFromJSON invoked');
	var ObjTableData = OBJECT_GLOBAL;
	console.log(ObjTableData);

	var col = [];//create an empty array
	//get the number of records, and then get and array of the field names in order to build the table header
	for (var i = 0; i < ObjTableData.length; i++) {
		for (var key in ObjTableData[i]) {
			if (col.indexOf(key) === -1) {
				col.push(key);
			}
		}
	}
	//create an element in which to put the table. This is done dynamically
	var table = document.createElement('table');
	var tr = table.insertRow(-1); // TABLE ROW.
	//actually build the table header
	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 < ObjTableData.length; i++) {
		tr = table.insertRow(-1);
		for (var j = 0; j < col.length; j++) {
			var tabCell = tr.insertCell(-1);

			tabCell.innerHTML = ObjTableData[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);
}