Load Certain CSV Data Into HTML Textarea

user_13637387 0
Viewed 702

i'm trying to ask someones help here with this.

This script works fine and shows all the csv file data into textarea, but I want it to only load the first column and skip the first 3 rows in the csv file. Is it possible to modify this code to achieve my goals?

Here is how it currently works: https://jsfiddle.net/mhwdjzbo/

Thanks for any suggestions..

Here is the code: 

<script type="text/javascript">
    $(document).ready(function(){
        $("#notification_email_id").change(function(e){
            var ext = $("input#notification_email_id").val().split(".").pop().toLowerCase();

            if($.inArray(ext, ["csv"]) == -1){
                alert('Please upload CSV file');
                return false;
            }

            if(e.target.files != undefined){
                var reader = new FileReader();
                reader.onload = function(e){
                    var csv_val=e.target.result.split("\r\n");              
                    var csv_value=""+csv_val+"".split(",");
                    var input_data="";
                    for(var i=0;i<csv_value.length;i++){
                        var temp=csv_value[i];
                        var input_data=input_data+""+temp;
                    }
                    final_input_data = input_data.slice(0, -1); 
                    $("#notification_email").val(final_input_data);
                };
                reader.readAsText(e.target.files.item(0));
            }
            return false;
        }); 
    }); 
    </script>
</head>
<body>  
    <table border="0">
        <tr>
            <td><b>How to read data From CSV file using jquery?</b></td>
        </tr>
        <tr>
            <td><textarea class="form-control" name="notification_email" id="notification_email" rows="4" placeholder="CSV file only" cols="40" readonly="readonly" required></textarea></td>
        </tr>
        <tr>
            <td><input name="notification_email_id" id="notification_email_id" type="file" class="" accept=".csv" /></td>
        </tr>
    </table>
</body>
csv textarea html jquery javascript
1 Answers

You can change your reader.onload function to be like this

reader.onload = function(e) {
  var csv_val = e.target.result.split("\n");
  var final_input_data = "";
  for (var i = 3; i < csv_val.length; i++) {              
    final_input_data += csv_val[i].split(' ')[0]+'\n';
  }
  $("#notification_email").val(final_input_data);
};

user_17555490
Related