How to save text file contents to Javascript variable?

Question

I'm trying to read a text file of over 150,000 lines of text. I want to be able to read the text file and pass it as a parameter for processFileContent.

I tried it this way, but it doesn't work. Also, is there a better way to do this for such big data?

function readFile(file) {
  var reader = new FileReader();
  reader.onload = function (evt) {
    var data = evt.target.result;
};
  reader.readAsText(file);
  return data;
}

document.getElementById('file').addEventListener('change', readFile, false);

var data = readFile();

function processFileContent(data) {
  var list = data.split('\n');
  ...

"Also, is there a better way to do this for such big data?" Do you mean a "better" way to process the data? — guest271314
– guest271314, Commented Sep 18, 2016 at 3:20
Not certain what occurs within processFileContent?, though you should alternatively be able to read data in chunks of one to n lines ending in \n, instead of calling .split() for all of data at one call. Not certain how to measure "efficiency"? Compared to what other process? — guest271314
– guest271314, Commented Sep 18, 2016 at 3:47

guest271314 · Accepted Answer · 2016-09-18 03:07:19Z

2

FileReader.onload event returns results asynchronously. You can use a callback or Promise to return result of FileReader to processFileContent. Also file at readFile would be event object, not .files property of event.target.

function readFile(event) {
  var file = event.target.files[0];
  if (file) {
    new Promise(function(resolve, reject) {
      var reader = new FileReader();
      reader.onload = function (evt) {
        resolve(evt.target.result);
      };
      reader.readAsText(file);
      reader.onerror = reject;
    })
    .then(processFileContent)
    .catch(function(err) {
      console.log(err)
    });
  }
}

document.getElementById('file')
.addEventListener('change', readFile, false);

function processFileContent(data) {
  var list = data.split('\n');
  ...

answered Sep 18, 2016 at 3:07

guest271314

1

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

Comments

kamoroso94 · Accepted Answer · 2016-09-18 03:24:45Z

One of your problems is with scoping. You declared data as a local variable in the onload event handler, and tried returning it from the outer function, in which it was undefined. To fix this, you need to move the variable declaration out of the event handler.

You also are expecting a file as an argument to your event handler it seems, however events pass Event objects to their event handlers. To get the file, you need to get event.target.files[0]. This should fix it.

function readFile(event) {
    var file = event.target.files[0];  // getting the file Blob
    var reader = new FileReader();
    var data;  // moved declaration
    reader.onload = function (evt) {
        data = evt.target.result;
    };
    reader.readAsText(file);
    return data;
}

Collectives™ on Stack Overflow

How to save text file contents to Javascript variable?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related