Read CSV file javascript

Question

I have file.csv like this:

Name,Gender //header

John,M

Luke,M

Jessy,F

I want to count total M and F with javascript so I have tried this:

   <script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        var F = 0;
        var M = 0;
    
    if (regex.test($("#fileUpload").val().toLowerCase())) {
        if (typeof (FileReader) != "undefined") {
            var reader = new FileReader();
            reader.onload = function (e) {
                var table = $("<table />");
                var rows = e.target.result.split("\n");
                for (var i = 0; i < rows.length; i++) {
                    var row = $("<tr />");
                    var cells = rows[i].split(",");
                    var gender = cells[1];
                    if (gender === "F"){
                            F++;
                     }else{
                            M++;
                     }
                    for (var j = 0; j < cells.length; j++) {
                        var cell = $("<td />");
                        cell.html(cells[j]);
                        row.append(cell);
                    }
                    table.append(row);
                }
                $("#dvCSV").html('');
                $("#dvCSV").append(table);
                window.alert(pos);
            }
            reader.readAsText($("#fileUpload")[0].files[0]);
        } 
     });
});
</script>

But var F & M not increased (just increased to 1 and didn't increase anymore) , can you help me to solve this problem? :(

Do you have spaces after (and sometimes before) the comma like in the given example? If yes, you must take them into account. — Arnauld
– Arnauld, Commented Aug 3, 2016 at 6:37
Another hypothesis is that the end of line consists of \r\n (CR+LF) rather than just \n (LF). In this case, what you get is M\r and F\r. Only the last row might be processed correctly if it's not followed by a carriage return. — Arnauld
– Arnauld, Commented Aug 3, 2016 at 6:45

score 1 · Accepted Answer · 2016-08-04 08:19:18Z

The code you posted has some missing brackets at the end so didn't run at first. You should check and ignore empty lines, also check for male explicitly so that you don't count the header line.

For each line if gender is "M" of "F" in your code apparently there is an additional new line character at the end (character code 13), try gender.length and it will show 2. We can check by using gender.charAt(0) === 'F'(or 'M')

I modified the code and it works

<html>
<head>
    <title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
            var F = 0;
            var M = 0;

            if (regex.test($("#fileUpload").val().toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var table = $("<table />");
                        var rows = e.target.result.split("\n");
                        for (var i = 0; i < rows.length; i++) {
                            if (rows[i].trim() != '') {
                                var row = $("<tr />");
                                var cells = rows[i].split(",");
                                var gender = cells[1];
                                if (gender.trim().charAt(0) === "F") {
                                    F++;
                                } else if (gender.trim().charAt(0) === "M") {
                                    M++;
                                }
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = $("<td />");
                                    cell.html(cells[j]);
                                    row.append(cell);
                                }
                                table.append(row);
                            }
                        }
                        $("#dvCSV").html('');
                        $("#dvCSV").append(table);
                        window.alert("F: " + F + ", M:" + M);
                    }
                    reader.readAsText($("#fileUpload")[0].files[0]);
                }
            }
        });
    });
</script>
</head>
<body>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
</body>
</html>

Collectives™ on Stack Overflow

Read CSV file javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related