Refactor table code
Use array map instead of nest loops to generate table
This commit is contained in:
parent
9d26b39485
commit
06b0d59d5f
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user