Load Certain CSV Data Into HTML Textarea

Question

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>

zana · Accepted Answer · 2020-05-28 21:47:28Z

1

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);
};

edited May 28, 2020 at 21:47

answered May 28, 2020 at 21:11

zana

3041 silver badge6 bronze badges

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

7 Comments

Siim H Over a year ago

Thanks alot for the answer, but this works for skipping the 3 first rows. How can I only load the data from first column?

zana Over a year ago

It is loading data from only the first column. You can try with a test .csv file with the following contents and you will see that it only loads the first column. Unless there is something different with your csv. Can you share a sample?

Siim H Over a year ago

Yeah, sure! You can get my sample used csv here: drive.google.com/file/d/13IeLmxliY_hcDhiR2LV9kNWEzXuH5IV6/…

zana Over a year ago

I have edited the code it. The issue is with what you consider to be text delimeter. In your case its a number of spaces or tab. Couldn't quite figure which but it should work fine now. I have tested with your sample file and all is well

Siim H Over a year ago

Sorry to bother, but is there any easy ways to add a button under the Textarea to remove spaces in the data? Something like: function RWS(str){ return str.replace(/ /g, ""); }

|

Collectives™ on Stack Overflow

Load Certain CSV Data Into HTML Textarea

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related