Notes

window.onload = loadData;

var students = {
classes: [
{
className: 10,
studentresults: [
{
studentName: "Student 1",
rank: 1,
peformanceLevel: "Above-Level",
completedPercent: "85%",
mid1Score: 498,
mid2score: 501,
finalscore: 499,
},
{
studentName: "Student 2",
rank: 2,
peformanceLevel: "On-Level",
completedPercent: "65%",
mid1Score: 368,
mid2score: 369,
finalscore: 401,
},
{
studentName: "Student 3",
rank: 3,
peformanceLevel: "Below-Level",
completedPercent: "55%",
mid1Score: 234,
mid2score: 326,
finalscore: 289,
},
{
studentName: "Student 4",
rank: 1,
peformanceLevel: "Above-Level",
completedPercent: "85%",
mid1Score: 498,
mid2score: 501,
finalscore: 499,
},
],
},
{
className: 9,
studentresults: [
{
studentName: "Student 1",
rank: 1,
peformanceLevel: "Above-Level",
completedPercent: "85%",
mid1Score: 498,
mid2score: 501,
finalscore: 499,
},
{
studentName: "Student 2",
rank: 2,
peformanceLevel: "On-Level",
completedPercent: "65%",
mid1Score: 368,
mid2score: 369,
finalscore: 401,
},
{
studentName: "Student 3",
rank: 3,
peformanceLevel: "Below-Level",
completedPercent: "55%",
mid1Score: 234,
mid2score: 326,
finalscore: 289,
},
{
studentName: "Student 4",
rank: 1,
peformanceLevel: "Above-Level",
completedPercent: "85%",
mid1Score: 498,
mid2score: 501,
finalscore: 499,
},
],
},
],
};

function loadData() {
var classes = {
classDropdown: ["Class 6", "Class 7", "Class 8", "Class 9", "Class 10"],
performanceLevel: [
"Select-Level",
"Above-Level",
"On-Level",
"Below-Level",
],
};

var elm = document.getElementById("class"),
df = document.createDocumentFragment();
classes.classDropdown.forEach((element) => {
var option = document.createElement("option");
option.value = element;
option.appendChild(document.createTextNode(element));
df.appendChild(option);
elm.appendChild(df);
});

var elm1 = document.getElementById("perfomanceLevel"),
df1 = document.createDocumentFragment();
classes.performanceLevel.forEach((element) => {
var option = document.createElement("option");
option.value = element;
option.appendChild(document.createTextNode(element));
df1.appendChild(option);
elm1.appendChild(df1);
});
}

function CreateTableFromJSON() {
var selectedClass = document.getElementById("class").selectedOptions[0].value;
var selectedPerfomanceLevel =
document.getElementById("perfomanceLevel").selectedOptions[0].value;

// EXTRACT VALUE FOR HTML HEADER.

var tableData;

var col = [];
if (selectedClass === "Class 10") {
tableData = students.classes[0].studentresults;
} else {
tableData = students.classes[1].studentresults;
}
for (var i = 0; i < tableData.length; i++) {
for (var key in tableData[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 < tableData.length; i++) {
tr = table.insertRow(-1);

for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableData[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);
}

function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open("GET", "table.json", true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(JSON.parse(xobj.responseText));
}
};
xobj.send(null);
}