Read local file line by line using javascript

Question

Am trying to achieve below task:

Read file line by line
split words in each line
create dynamic row with each word as a column.

I tried something like below, but it's not working:

$.get('test.txt', function(myContentFile) {
    var lines = myContentFile.split("\r\n");
    var table = document.getElementById("myTableData");

    for(var i  in lines){
        var str = lines[i]
        var res = str.split(",");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = res[0];
        cell2.innerHTML = res[1];
    }

}, 'text');

It is not possible to access local files from browser session. Just imagine how big security hole would it be — Vlad Miller, Nov 13 '15 at 08:53
http://stackoverflow.com/questions/6923707/using-ajax-to-read-local-files — Yuri H., Nov 13 '15 at 08:57
Could you describe what "it is not working" means? Do you get an error? Does your code get executed? Does it produce only half of the text? Please be specific. Have you tried to add `console.log` into your code to inspect which code is and is not executed, and the content of some variables? — trincot, Nov 15 '15 at 09:50

score 1 · Answer 1 · edited May 23 '17 at 12:30

Make sure you have included jQuery before your code executes, and have the table element with the correct id value in your document, something like this:

<table id="myTableData" border="1"><table>

Also make sure your text file (text.txt) resides in the same local folder as your html page.

If all these conditions are met, your code runs. Still, there are some things to tweek then. See the changes and comments I added to your code:

<html>
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
<table id="myTableData" border=1><table>

<script type="text/javascript">
    $.get('test.txt', function(myContentFile) {
        console.log(myContentFile);
        // Added: strip ending new-lines from the retrieved text:
        myContentFile = myContentFile.replace(/[\r\n]$/, '');
        // Modified: split lines also when delimited by linefeeds only:
        var lines = myContentFile.split(/\r\n|\n/);
        var table = document.getElementById("myTableData");

        for(var i  in lines){
            var str = lines[i]
            var res = str.split(",");
            // Modified: remove argument to add rows to the end of the table
            var row = table.insertRow();
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = res[0];
            // Modified: test that second element exists to prevent "undefined" output
            cell2.innerHTML = res[1] ? res[1] : '';
        }
    }, 'text');
</script>
</body>
</html>

I put the following test.txt file in the same folder:

This is a test, with something in second column
And a second line, that also has a second column
The third line just has one value

Then, when I open the html page in the browser, I get this output:

| This is a test                    | with something in second column |
| And a second line                 | that also has a second column   |
| The third line just has one value |                                 |

score 0 · Answer 2 · answered Nov 13 '15 at 08:57

0

You have to put an <input type="file" id="myfile" /> before you can manipulate your file.

And then get your file with (jquery) :

var myFile = $('#myfile').prop('files');

Otherwise you can't access it.

answered Nov 13 '15 at 08:57

Nvan

1,126
16
23

Thank for reply. As an overview, i will be using it as an HTA file which will be running in local machine. Security is not a problem. Can you please guide me where i need to mention – user2529462 Nov 13 '15 at 09:06
@user2529462 You can't access files by Javascript if you opened a file using `file://` protocol! – hijarian Nov 15 '15 at 10:21
@hijarian: Yes you can. – trincot Nov 15 '15 at 11:21
@trincot In the context of `$.get()` method used by the OP, you can't. File API uses completely different approach, and leads to different UI/UX, which is probably not what OP needs. – hijarian Nov 15 '15 at 11:57
@user2529462 You can't say "security is not a problem" to web browser vendors in this case. AJAX does not work if you open a HTML document using `file://` protocol, that is, from the file manager. – hijarian Nov 15 '15 at 11:59
@hijarian:: maybe I misunderstood what you are saying, but with $.get() it works. – trincot Nov 15 '15 at 12:03
@trincot Please, show the HTML + Javascript code you are using. I just have mocked up a page just to confirm this thing, *which I know already from my own past experience*, and $.get() is not firing at all from local pages. – hijarian Nov 15 '15 at 12:27
I provided it in my own answer. It just needs a `test.txt` to reside in the same folder as the `html` file I provide the complete code of. It works for me. – trincot Nov 15 '15 at 12:30

Read local file line by line using javascript

2 Answers2