CODEWITHSUNDEEP
javascriptcsv
jill182
jill182

Reputation: 91

Read CSV file javascript

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? :(

Upvotes: 0

Views: 757

Answers (1)

user5539403
user5539403

Reputation:

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>

Upvotes: 1

Related Questions