I have recently started learning HTML and Javascript, so please excuse me if this question may seem basic. I am developing a ‘simple’ file manipulator for a project and have come across an issue. Some background, the file is submitted into a javascript array and any excess information is removed. This array is then sent to a HTML table which is what will be displayed on the webpage. A new column is added to the table after this which is a number input. The idea is that this table will then create a javascript array which will then go through further manipulation before being downloaded as a CSV file. I have the initial table creation and input fields sorted, and the end with array manip and CSV creation, the middle part is what I’m stuck with.
example of what it currently looks like.
In essence I need the value in ‘Dilutions’ to be read, and that number of entries created in an array for the ‘SAMPLEID’, in order. So for example, [‘26444563-1′,’26444564-1’,’26444564-2’…] etc. Ideally, this would be attached to a new button or something similar, and the total sum of the input values would be at most 84 and return an error, but that shouldn’t be an issue to check beforehand.
const form = document.querySelector("#sifForm");
const sifFileInput = document.querySelector("#sifInput");
//csv to array logic
function csvToArr(str, delimiter = ",") { //string and delimiter in file
//slice from start of text, split on new line n regex
//split creates array on delimiter
const headers = str.slice(0, str.indexOf("n")).split(delimiter);
//slice from new line index +1 to the end of the text
//split creates array on each new line
const rows = str.slice(str.indexOf("n")+1).split("n");
//map the rows
//split values from each row into an array
//use headers.reduce to create an object
//object properties derived fromm header:values
//object passed as element of array
const arr = rows.map(function (row) {
const values = row.split(delimiter);
const el = headers.reduce(function (object, header, index) {
object[header] = values[index];
return object;
}, {});
return el;
});
//return array
return arr;
}
//logic for form submission
form.addEventListener("submit", function (event) {
event.preventDefault(); //prevents default refresh on submit button
const input = sifFileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const text = e.target.result;
const data = csvToArr(text);
//document.write(JSON.stringify(data,null," "));
//console.log(data)
//set field to keep
function selectFields(sID) {
const {SAMPLEID} = sID;
return {SAMPLEID};
}
const workSheet = data.map(selectFields);
//remove undefined
workSheet.pop();
console.log(workSheet);
//add dilutions
//workSheet.forEach(function (element) {
// element.Dilutions = `<input type="number" name="balance" />` ;
//});
//Create Table
const table = document.querySelector("#worksheettbl");
const headers = table.querySelector("thead tr");
const body = table.querySelector("tbody");
// Create headers
for (const key in workSheet[0]) {
const header = document.createElement("th");
header.innerText = key;
headers.append(header);
}
// Create tbody rows
workSheet.forEach(obj => {
// Create row
const row = document.createElement("tr");
body.append(row);
// Create row element
for (const key in obj) {
const value = document.createElement("td");
value.innerText = obj[key];
row.append(value);
}
});
//add dilution number inputs
function addDilutions(){
addColumn(table, 'Dilutions');
}
function addColumn(table, headerText){
const newHeaderCol = document.createElement('th');
newHeaderCol.innerText = headerText;
table.querySelector('thead > tr:first-child').append(newHeaderCol);
const tableRows = table.querySelectorAll('tbody > tr');
let iRow = 0;
for(const tableRow of tableRows){
const newBodyCol = document.createElement("input");
newBodyCol.type = "number"
newBodyCol.value = 1
tableRow.append(newBodyCol);
}
}
addDilutions();
};
reader.readAsText(input); //reads the file
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="sifForm">
<input type="file" id="sifInput" accept=".sif"/>
<input type="submit" value="Submit" />
</form>
<table id="worksheettbl">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="js/input.js"></script>
</body>
</html>
Any advice would be appreciated. Thanks.
