How to read local csv file in JavaScript TypeScript

0 votes

I have a csv file that looks something like this, and I need to import a local csv file into my client side javascript:

    "L.Name", "F.Name", "Gender", "School Type", "Subjects"
    "Doe",    "John",  "M",      "University",  "Chem I, statistics, English, Anatomy"
    "Tan",    "Betty",   "F",     "High School", "Algebra I, chem I, English 101"
    "Han",    "Anna",    "F",     "University",  "PHY 3, Calc 2, anatomy I, spanish 101"
    "Hawk",   "Alan",    "M",     "University",  "English 101, chem I" 

I eventually need do parse it and output something like:

Chem I: 3         (number of people taking each subject)
Spanish 101: 1 
Philosophy 204: 0 

But for now, I am stuck on just importing it into JavaScript.

My current code looks like this:

<!DOCTYPE html>  
<html>  
<body>
<h1>Title!</h1>
<p>Please enter the subject(s) that you wish to search for:</p>
<input id="numb" type="text"/> 
<button onclick="myFunction()">Click me to see! :) </button>
<script>
function myFunction() {
    var splitResearchArea = []; 
    var textInput = document.getElementById('numb').value; 
    var splitTextInput = textInput.split(",");

  for(var i =0; i<splitTextInput.length; i++) {
    var spltResearchArea = splitTextInput[i];
    splitResearchArea.push(spltResearchArea);
  }
}
Jun 8 in TypeSript by Logan
• 1,580 points
5 views

1 answer to this question.

0 votes

Here is how to use the readAsBinaryString() from the FileReader API to load a local file.

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

Just listen to change event in <input type="file"> and call the readFile function.

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);
answered Jun 9 by Nina
• 2,900 points

Related Questions In TypeSript

0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
39 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 2,900 points
15 views
0 votes
1 answer

How to create enum type in TypeScript?

TypeScript 0.9+ has a specification for enums: enum ...READ MORE

answered Jun 8 in TypeSript by Nina
• 2,900 points
17 views
0 votes
1 answer

How to install and run Typescript locally in npm?

It took me a while to figure ...READ MORE

answered Jun 8 in TypeSript by Nina
• 2,900 points
31 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 10,840 points
508 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 10,840 points
219 views
0 votes
0 answers

how to sign bitcoin psbt with ledger?

I'm trying to sign a PSBT transaction ...READ MORE

Mar 9 in Blockchain by Soham
• 8,730 points
170 views
0 votes
0 answers

Can't bind to 'ngModel' since it isn't a known property of 'input'

I have this  input in my component ...READ MORE

Apr 29 in Other DevOps Questions by Kichu
• 19,040 points
103 views
0 votes
1 answer

How to pass HTML to JPG/PNG? In Javascript/Typescript

You can use the package: https://www.npmjs.com/package/dom-to-image In your page: import ...READ MORE

answered 6 days ago in TypeSript by Nina
• 2,900 points
11 views
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
17 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP