Javascript cannot push to global array inside function

Question

I have a folder filled with json files and I am trying to push them all into an array. However, the outer array is blank. Any help on why this is happening or explaining a better approach would be appreciated.

var fs = require('fs');
var dataFolder = './jsonData/';

var arr = [];
fs.readdir(dataFolder, (err, files) => {
    files.forEach(file => {
        fs.readFile(dataFolder + file, 'utf8', function (err, data) {
            if (err) throw err;
            arr.push(data);
            console.log (arr); // correct output
        })
    })
})
console.log (arr);  //output is []

Sorry for how ugly it looks, but here's some of the output from the inner array:

[ '{\n "title": "A New Kind of Science [Hardcover]",\n "author": "Stephen Wolfram",\n "price": "$20.73",\n "shippingWeight": "5.6 pounds",\n "isbn10": "1579550088"\n}' ]

[ '{\n "title": "A New Kind of Science [Hardcover]",\n "author": "Stephen Wolfram",\n "price": "$20.73",\n "shippingWeight": "5.6 pounds",\n "isbn10": "1579550088"\n}', '{\n "title": "I Wear the Black Hat: Grappling with Villains (Real and Imagined) [Hardcover]",\n "author": "Chuck Klosterman",\n "price": "$15.49",\n "shippingWeight": "2.2 pounds",\n "isbn10": "1439184496"\n}' ]

can u paste what u see in the dev console in the question too? — Mox, Dec 22 '16 at 02:38
thats exactly my thought ... its possible that its aync lol.. since that anonymous function is a callback. — Mox, Dec 22 '16 at 02:40
Probable duplicate of http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — PMV, Dec 22 '16 at 02:40
@max Yeah the forEach is getting called. I updated the with the output. Thanks for the quick responses! — Brandon Flint, Dec 22 '16 at 02:46
@mox Yeah the forEach is getting called. I updated the with the output. Thanks for the quick responses! — Brandon Flint, Dec 22 '16 at 03:14

score 2 · Accepted Answer · edited Apr 13 '17 at 12:45

readdir is asynchronous it has not executed by the time you get to your console.log.

var arr = []; - set the arr to an empty array.
fs.readdir(....) go read the directory in the back ground and schedule the callback to execute after readdir background job is done and this file has finished excuting.
console.log(arr); print arr as it is now (empty).
readdir is done and there is nothing else left on the call stack so now we can finally execute the callback.
start pushing to arr.
console.log(arr); print arr as it is now (finally populated).

Also global state is a source of much confusion and bugs. Try to design your code so it does not rely on global state. (https://softwareengineering.stackexchange.com/a/148109/16887)

Javascript cannot push to global array inside function

1 Answers1