1

I have a very simple requirement but not able to figure out as to how to do it. Below Javascript code reads a CSV file and creates a HTML table. My CSV has following data in it:

Type, Item, Value, Dec, Figure
SUM,ThisItem,ThisValue,2,4
SUM,ThisItem1,ThisValue1,4,5
RCT,ThisItem1,ThisValue1,6,7

How can I insert a code or a line in below code that would help me store "Type" column value in a variable, "Item" column value in a variable and so on. For example, if Type=="SUM" then take some action (for example send data or complete row to table). I tried several times by adding some logic but to no avail.

function Upload() {
const columns = [0,1,2,3,4] // represents allowed column 1 and 3 in index form

var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
    if (typeof (FileReader) != "undefined") {
        var reader = new FileReader();
        reader.onload = function (e) {
            var table = document.createElement("table");
            var rows = e.target.result.split("\n");
            for (var i = 0; i < rows.length; i++) { var cells = rows[i].split(","); if (cells.length > 1) {
                    var row = table.insertRow(-1);
                    for (var j = 0; j < cells.length; j++) {
                        // ignore columns that are not allowed
                        if (!columns.includes(j)) {
                          continue
                        }

                        var cell = row.insertCell(-1);
                        cell.innerHTML = cells[j];
                    }
                }
            }
            var dvCSV = document.getElementById("dvCSV");
            dvCSV.innerHTML = "";
            dvCSV.appendChild(table);
        }
        reader.readAsText(fileUpload.files[0]);
    } else {
        alert("This browser does not support HTML5.");
    }
} else {
    alert("Please upload a valid CSV file.");
}

}

7
  • cells[j] is the textual data coming from the CSV file? Example: Type, Item, Value, Dec, Figure? Commented Apr 16, 2021 at 3:34
  • yup, figured. Thanks.var rc = cells[j]; if (rc == "SUMMARY") { var cell = row.insertCell(-1); cell.innerHTML = cells[j]; alert(rc); } Commented Apr 16, 2021 at 3:37
  • So you got it figured out then yes? Commented Apr 16, 2021 at 3:39
  • yes, Thanks for your help. Can there be a simple solution? For example, cells[j] gives me all values. I would like to store "Type" value in a separate variable and then "Item" value in a separate variable. Commented Apr 16, 2021 at 3:54
  • For example, if "Type" == "SUMMARY" then complete row from CSV should go to a table and if "Type == "THIS" then complete row should go to another table. Commented Apr 16, 2021 at 3:57

1 Answer 1

1

cells[j] is your textual content from the CSV file, use the conditional on each iteration to check if there is a match on the value you are looking for, if there is a match, then define your variable and complete your row.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.