Javascript how to load contents from multiple json files using FileReader.onload?

Question

I need to upload multiple json files and store their contents in an array. My goal is to somehow merge them together. I tried doing this:

var results = new Array();    //global variable

document.getElementById('uploadId').onclick = function () {
   var files = document.getElementById('selectFiles').files;

   for (var i = 0; i < files.length; i++) {
       var fr = new FileReader();

       fr.onload = function (e) {
           console.log(e);
           var result = JSON.parse(e.target.result);
           results.push(result);
       }

       fr.readAsText(files.item(i));
   }
   process();
}; 

function process(){
   console.log(results); // displays everything as expected
   console.log(results.length); // returns 0 ?!
   console.log(results[0]) // return undefined ?!
}

then while logging the results array into console, everything displays as expected. But when I try to iterate through the array, all the individual objects are undefined. And results.length returns 0 as well.

I guess there might be a problem connected to the asynchronicity. Any idea how to solve this?

Does there happen to be a little blue 'i' symbol next to results when it gets logged? — matthew-e-brown
– matthew-e-brown, Commented Dec 3, 2019 at 19:06
That little 'i' is the browser's console telling you that that piece of data was evaluated when you went to look at in the console, and not when its line was reached. This means that (probably) it was empty while process() was running, and it wasn't until afterwards when you inspected that it was actually populated. — matthew-e-brown
– matthew-e-brown, Commented Dec 3, 2019 at 19:12
@matthew-e-brown so I need to wait a bit before calling process() until the adding to the array is done? — pelikann
– pelikann, Commented Dec 3, 2019 at 19:25
You need to execute process() once all fr.onload() are finished. — Lain
– Lain, Commented Dec 3, 2019 at 19:29

Lain · Accepted Answer · 2019-12-03 21:01:21Z

You can bind a predefined object to the load function (or define a scope and/or global variable) which stores two values: filesToProcess and filesProcessed. On each onload you increment filesProcessed until it reaches filesToProcess. This is, if you want to keep old browser like IE or old Safari versions supported.

Sadly I can only show it in theory, without any actual testing.

document.getElementById('uploadId').onclick = function () {
   var files = document.getElementById('selectFiles').files,
       param = {filesProcessed: 0, filesToProcess: files.length};

   for (var i = 0; i < files.length; i++) {
       var fr = new FileReader();

       fr.onload = function(e){
           results.push(JSON.parse(e.target.result));

           //REM: this being param
           this.filesProcessed++;

           if(this.filesProcessed === this.filesToProcess){
               process()
           }
       }.bind(param)

       fr.readAsText(files.item(i));
   }
};

matthew-e-brown · Accepted Answer · 2019-12-03 20:11:46Z

0

Usually you would avoid this problem by making the code you're waiting for the files for (in this case, process) a part of the FileReader's listener, so that it happens once it is finished. I can't think of a scenario when you would need to have the user upload multiple files to the same input and not be able to process them separately (i.e., if you needed two files to go hand-in-hand, take them in separate inputs and use a submit button).

However, if you ever do, my advice would be to use async/await or ES6 Promises. Here is my approach to read all files into an array as JSON, and then do something with them.

const results = [];
const input = document.querySelector('input[type="file"]');

input.addEventListener('change', async() => {
  await Promise.all([...input.files].map(file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      try {
        resolve(results.push(JSON.parse(reader.result)));
      } catch (err) {
        // Return a blank value; ignore non-JSON (or do whatever else)
        console.log('Please use .json!');
        resolve();
      }
    }
    reader.readAsText(file);
  })));

  // Do Stuff
  console.log(results);
  console.log(results.length);
  console.log(results[0]);
});

<form action="#">
  <input type="file" multiple />
</form>

This is very similar to my answer here.

Some JSON files to test:

[
  {
    "name": "bobby",
    "age": 12
  },
  {
    "name": "don",
    "age": 64
  },
  {
    "name": "dale",
    "age": 16
  },
  {
    "name": "toby",
    "age": 52
  },
  {
    "name": "alfred",
    "age": 234
  },{
    "name": "steve",
    "age": 12
  }
]

[
  {
    "name": "denmark"
  },
  {
    "name": "sweden"
  },
  {
    "name": "norway"
  },
  {
    "name": "finland"
  }
]

edited Dec 3, 2019 at 20:11

answered Dec 3, 2019 at 20:02

matthew-e-brown

3,1171 gold badge15 silver badges35 bronze badges

3 Comments

matthew-e-brown Over a year ago

@pelikann Just keep in mind that when using Promises / Async & Await that you lose IE support. Don’t forget to pick an answer as accepted if it solved your problem! :)

pelikann Over a year ago

One lame solution also came to my mind. I could just wrap process() into setTimeout of like 5s, and I guess it would work in most cases.

matthew-e-brown Over a year ago

@pelikann you could most certainly, but I think that saying most would frown upon such a solution is an understatement ;)

Collectives™ on Stack Overflow

Javascript how to load contents from multiple json files using FileReader.onload?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related