Array.push not updating an array variable

Question

Here is the code I am working on:

<!--HTML Code for referencing the file -->
<input type="file" name="file" id="file">
<script>
var store = [];
document.getElementById('file').onchange = function(){
    var file = this.files[0];
    var reader = new FileReader();

    // Define the body of reader function
    reader.onload = function(progressEvent){

    // By lines
    var lines = this.result.split('\n');
    for(var line = 0; line < lines.length; line++){

    // Store it in an array
    store.push(lines[line]);
    //console.log(store.length); // This line on being uncommented
    // shows that store is being modified. The values getting printed
    // are 1,2,3, ...... upto 16 (length of the input file)
}
};

// Read the file and store it in the var "store"
reader.readAsText(file);
console.log(store.length); // The problem appears here!!!!!
};
</script>

The problem is, even after choosing a file containing 16 sample numbers, the console prints the store.length value as 0. Why is the push command not affecting the var "store" ?

Hav your tried making the reader variable global? (Put var reader outside the onchange event.) — Twister1002
– Twister1002, Commented Jun 3, 2015 at 19:47
Yes it is. If you uncomment the line console.log(store.length); it does display an increasing length upto 16. — G.One
– G.One, Commented Jun 3, 2015 at 19:48

Deleteman · Accepted Answer · 2015-06-03 19:48:22Z

1

You're setting up an event handler on the onchange property, but you're doing a console.log(store.length) outside, so you will never get the results you expect that way.

The event handler function will be triggered when the value of your element with id "file" changes, so you need to print the length of the store, inside the function, like this:

document.getElementById('file').onchange = function(){
    var file = this.files[0];
    var reader = new FileReader();

    // Define the body of reader function
    reader.onload = function(progressEvent){

    // By lines
    var lines = this.result.split('\n');
    for(var line = 0; line < lines.length; line++){

    // Store it in an array
    store.push(lines[line]);
    //console.log(store[line]);

     }
    console.log(store.length);
};

I would recommend also declaring the store as local to that function, that way you'll always get a brand new array, otherwise you need to manually re-initialize it or empty it before you start adding things to it or on subsequent change events, your "store" array will be filled with everything from the previous changes.

Makes sense?

answered Jun 3, 2015 at 19:48

Deleteman

8,6907 gold badges28 silver badges40 bronze badges

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

2 Comments

G.One Over a year ago

Oh! Yeah I understood it! So, it means the bottom statements are getting executed before the file is loaded and onchanged property is being called?

Deleteman Over a year ago

exactly, that's the main issue.

trevorade · Accepted Answer · 2015-06-03 19:52:56Z

0

FileReader is asynchronous. You either want to use FileReaderSync or do this:

var store = [];
document.getElementById('file').onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();

  // Define the body of reader function
  reader.onload = function(progressEvent) {

    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {

      // Store it in an array
      store.push(lines[line]);
    }
  };

  reader.onloadend = function() {
    console.log(store.length);
  };

  // Read the file and store it in the var "store"
  reader.readAsText(file);
};

<input type="file" name="file" id="file">

answered Jun 3, 2015 at 19:52

trevorade

1,0207 silver badges9 bronze badges

1 Comment

G.One Over a year ago

Got it! Thanks for providing the .onloadend function !

rdleal · Accepted Answer · 2015-06-03 19:59:09Z

0

The onload event of the FileReader is asyncrhonous. Which means it's not executed in the natural flow of the program.

To check the final length of the store variable, you should do this:

var store = [];
document.getElementById('file').onchange = function(){
    var file = this.files[0];
    var reader = new FileReader();

    // Define the body of reader function
    reader.onload = function(progressEvent){

        // By lines
        var lines = this.result.split('\n');
        for(var line = 0; line < lines.length; line++){

            // Store it in an array
            store.push(lines[line]);
        }
        // Correctly reads the final length of the store variable.
        console.log(store.length);
    };

    reader.readAsText(file);
};

Hope it helps.

edited Jun 3, 2015 at 19:59

answered Jun 3, 2015 at 19:51

rdleal

1,0227 silver badges16 bronze badges

Collectives™ on Stack Overflow

Array.push not updating an array variable

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related