Refactor table code

Use array map instead of nest loops to generate table
This commit is contained in:
Nick Playfair 2021-03-07 19:23:35 +00:00
parent 9d26b39485
commit 06b0d59d5f

View File

@ -52,13 +52,21 @@ function getJSONParts(allParts) {
} }
}); });
jsonParts['C'] = C; jsonParts.C = C;
jsonParts['R'] = R; jsonParts.R = R;
jsonParts['Q'] = Q; jsonParts.Q = Q;
return jsonParts; return jsonParts;
} }
// Format the HTML nicely and output to a pre code block
function displayMarkup() {
const tableCode = document.querySelector('table').outerHTML;
const markup = document.getElementById('markup');
markup.innerText = beautify(tableCode);
}
// Table functions
function clearTable() { function clearTable() {
document.querySelector('table').innerHTML = ''; document.querySelector('table').innerHTML = '';
} }
@ -67,30 +75,26 @@ function generateTableHead(table, data) {
const thead = table.createTHead(); const thead = table.createTHead();
const row = thead.insertRow(); const row = thead.insertRow();
// Populate Header row // Populate Header row
for (const key of data) { data.map((key) => {
const th = document.createElement('th'); const th = document.createElement('th');
const text = document.createTextNode(key); const text = document.createTextNode(key);
th.appendChild(text); th.appendChild(text);
row.appendChild(th); row.appendChild(th);
} });
} }
function generateTableBody(table, data) { function generateTableBody(table, data) {
for (const element of data) { data.map((component) => {
const row = table.insertRow(); const row = table.insertRow();
for (const key in element) { // Insert Part Name
const cell = row.insertCell(); const partName = row.insertCell();
const text = document.createTextNode(element[key]); const partNameText = document.createTextNode(component.Part);
cell.appendChild(text); partName.appendChild(partNameText);
} // Insert Part Value
} const partVal = row.insertCell();
} const partValText = document.createTextNode(component.Value);
partVal.appendChild(partValText);
// Format the HTML nicely and output to a pre code block });
function displayMarkup() {
const tableCode = document.querySelector('table').outerHTML;
const markup = document.getElementById('markup');
markup.innerText = beautify(tableCode);
} }
function makeTable(csvString) { function makeTable(csvString) {
@ -103,6 +107,7 @@ function makeTable(csvString) {
.then((jsonObj) => { .then((jsonObj) => {
// Create array containing only relevant parts // Create array containing only relevant parts
const parts = jsonObj.filter(isJunk); const parts = jsonObj.filter(isJunk);
console.log(parts);
const table = document.querySelector('table'); const table = document.querySelector('table');
const headerData = Object.keys(parts[0]); const headerData = Object.keys(parts[0]);
generateTableBody(table, parts); generateTableBody(table, parts);
@ -114,6 +119,7 @@ function makeTable(csvString) {
}); });
} }
// Create a JSON object for Contentful
function makeJSON(csvString) { function makeJSON(csvString) {
csv({ csv({
delimiter: ';', delimiter: ';',
@ -124,7 +130,7 @@ function makeJSON(csvString) {
.then((res) => { .then((res) => {
const object = res.filter(isJunk); const object = res.filter(isJunk);
const parts = getJSONParts(object) const parts = getJSONParts(object);
document.getElementById('jsonObject').innerText = JSON.stringify( document.getElementById('jsonObject').innerText = JSON.stringify(
parts, parts,