4

There are plenty of examples of reading a CSV file using jQuery however javascript examples are few and far between.

As i am using an internal script editor for a particular application, i am limited to using Javascript only.

I have a csv file that has headings followed by data in each row.

Heading1,Heading2,Heading3,Heading4
row1data1,row1data2,row1data3,row1data4
row2data1,row2data2,row2data3,row2data4

The delimiter being used is , however there could be others e.g. ^.

As i can't upload a file, i have the option to manually reference an absolute path.

Is there a way i can use only javascript to read a csv file?

9
  • 1
    Are you asking how to read a file with javascript? Or how to parse a large string you have in javascript as CSV? Commented Feb 26, 2014 at 4:26
  • You can fetch the csv using ajax/text and then split it with newline, then comma Commented Feb 26, 2014 at 4:27
  • @Sajith Nair - I can't use AJAX. I am limited to simple ol' javascript Commented Feb 26, 2014 at 4:30
  • @Alex Wayne - I am asking to read the contents of a file with javascript and place its contents into an key value array. Commented Feb 26, 2014 at 4:31
  • 1
    @A.K - If you have a look at the 2 posts you cited, they either use PHP, jQuery or AJAX neither of which i can use. Commented Feb 26, 2014 at 18:38

1 Answer 1

15

As a start, here is a couple of ways to read a file with javascript

HttpRequest: (from web server or absolute path)

Source: Javascript - read local text file

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

And specify file:// in your filename when using an absolute path

readTextFile("file:///C:/your/path/to/file.txt");

FileReader API:

Source:
- http://codepen.io/matt-west/pen/KjEHg
- http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

HTML

<div id="page-wrapper">

    <h1>Text File Reader</h1>
    <div>
        Select a text file: 
        <input type="file" id="fileInput">
    </div>
    <pre id="fileDisplayArea"><pre>

</div>

JS

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}

JS on MS Windows (simple sample)

Source: http://msdn.microsoft.com/en-us/library/czxefwt8(v=vs.84).aspx

function ReadFiles()
{
   var fso, f1, ts, s;
   var ForReading = 1;
   fso = new ActiveXObject("Scripting.FileSystemObject");
   ts = fso.OpenTextFile("c:\\testfile.txt", ForReading);
   s = ts.ReadLine();
   // s holds the text content
   ts.Close();
}
Sign up to request clarification or add additional context in comments.

6 Comments

@PellePenna - Sorry PellePenna. The application doesn't support XMLHTTPRequest or a combination of HTML & JS. It needs to be straight-out javascript.
I updated my answer, at bottom, how to use it on a Windows computer. You have to test if UNC path will work. If not, you have to assing a letter to a path, which of course can be done to both ip and local network computers
@PellePenna - Thanks PellePenna. The last example you gave worked like a charm
Useful for reading many files, like html and txt, but using a csv brings up "File not supported!"... Question referred to csv in particular. Am I right or did I miss something?
All "text" files should but binary likely not (haven't tried though), so make sure it's a text file.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.