Javascript multidimensional array populated with HTML5 FileReader undefined (but only on first use!)

Question

I have a global array consisting of four other arrays:

var enthalpyVariables = [[],[],[],[]];

I am populating it with values from a csv file:

function readTable()
    {

        if (window.File && window.FileReader && window.FileList && window.Blob)
        {
            // window.alert("OK");
            var filelist = document.getElementById("TextFile");

            var fileToRead = filelist.files[0];

            var myFileReader = new FileReader();

            myFileReader.onload = function (e)
            {   
                // Create an array consisting of the lines in the file
                var contents = myFileReader.result.split('\r\n');

                // Create an array to store the comma-separated values of
                // the 'current' line
                var currentLine = [];

                enthalpyVariables = [];
                var valueToPush = [];

                var i = 2;
                while (i < contents.length)
                {   
                    currentLine = contents[i].split(',');
                    valueToPush = [];
                    // prepare to push temp
                    valueToPush[0] = parseFloat(currentLine[0]);
                    // prepare to push pressure
                    valueToPush[1] = parseFloat(currentLine[1]);
                    // prepare to push hf
                    valueToPush[2] = parseFloat(currentLine[6]);
                    // prepare to push hg
                    valueToPush[3] = parseFloat(currentLine[8]);

                    enthalpyVariables.push(valueToPush);

                    i++;
                }

            };

            myFileReader.readAsText(fileToRead);
        }
        else
        {
            window.alert("Not supported");
            return;
        }

    }

The csv file looks like:

Temp,Pressure,volume (m^3/kg),,energy (kJ/kg),,enthalpy (kJ/kg),,,entropy (kJ/kg.K),, °C,MPa,vf,vg,uf,ug,hf,hfg,hg,sf,sfg,sg 0.01,0.00061,0.001,205.99,0,2374.9,0.001,2500.9,2500.9,0,9.1555,9.1555 5,0.00087,0.001,147.01,21.02,2381.8,21,2489.1,2510.1,0.0763,8.9485,9.0248 10,0.00123,0.001,106.3,42.02,2388.6,42,2477.2,2519.2,0.1511,8.7487,8.8998 15,0.00171,0.001,77.875,62.98,2395.5,63,2465.3,2528.3,0.2245,8.5558,8.7803 20,0.00234,0.001,57.757,83.91,2402.3,83.9,2453.5,2537.4,0.2965,8.3695,8.666 25,0.00317,0.001,43.337,104.83,2409.1,104.8,2441.7,2546.5,0.3672,8.1894,8.5566 30,0.00425,0.001,32.878,125.73,2415.9,125.7,2429.8,2555.5,0.4368,8.0152,8.452

I attempt to calculate pressure for a given temperature using this function:

function calcPressure(temp)
    {   
        var i = 0;

        while (temp > enthalpyVariables[i][0])
        {
            i++;
        }
        // don't need to interpolate
        if (temp == enthalpyVariables[i][0])
        {
            return enthalpyVariables[i][1];
        }
        // need to interpolate
        else
        {
            var p0, p1, t0, t1;
            p0 = enthalpyVariables[i-1][1];
            p1 = enthalpyVariables[i][1];
            t0 = enthalpyVariables[i-1][0];
            t1 = enthalpyVariables[i][0];

            // alert (p0 + ' ( ' + p1 + ' - ' + p0 + ' ) * ( ' + temp + ' - ' + t0 + ' ) / ( ' + t1 + ' - ' + t0 + ' ) ')
            return p0 + ( p1 - p0 ) * ( temp - t0 ) / ( t1 - t0 );
        }
    }

I have a button that executes this:

function main()
        {

            enthalpyVariables = [[],[],[],[]]
            readTable();

            var unvalidatedTemp = 27; // document.getElementById("tempInput").value;
            var unvalidatedPressure = 4; // document.getElementById("pressureInput").value;

            calcPressure(unvalidatedTemp);
            //validateInput(unvalidatedTemp, unvalidatedPressure);
        }

It works GREAT... the second time I click it. The first time I click it, nothing happens, and the console states that enthalpyVariables is undefined. If I click it again, it calculates the expected value for an interpolated pressure (the pressure associated with 27 is not specifically in the table, but pressure should be interpolated to 0.003602, for instance) The weirdest thing is if I step through it in the debugger, enthalpyVariables DOES get defined, and this error is never thrown! I've tried it in FireFox and Chrome, to the same result. Why is enthalpyVariables not defined on the initial run execution!?

Answer 1

The file is read after calcPressure is called, pass in a callback to call once the file is read, like this...

function main()
    {
        enthalpyVariables = [[],[],[],[]]
        readTable(function(){

            var unvalidatedTemp = 27; // document.getElementById("tempInput").value;
            var unvalidatedPressure = 4; // document.getElementById("pressureInput").value;

            calcPressure(unvalidatedTemp);
            //validateInput(unvalidatedTemp, unvalidatedPressure);

        });
    }


function readTable(callback)
{

    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
        // window.alert("OK");
        var filelist = document.getElementById("TextFile");

        var fileToRead = filelist.files[0];

        var myFileReader = new FileReader();

        myFileReader.onload = function (e)
        {   
            // Create an array consisting of the lines in the file
            var contents = myFileReader.result.split('\r\n');

            // Create an array to store the comma-separated values of
            // the 'current' line
            var currentLine = [];

            enthalpyVariables = [];
            var valueToPush = [];

            var i = 2;
            while (i < contents.length)
            {   
                currentLine = contents[i].split(',');
                valueToPush = [];
                // prepare to push temp
                valueToPush[0] = parseFloat(currentLine[0]);
                // prepare to push pressure
                valueToPush[1] = parseFloat(currentLine[1]);
                // prepare to push hf
                valueToPush[2] = parseFloat(currentLine[6]);
                // prepare to push hg
                valueToPush[3] = parseFloat(currentLine[8]);

                enthalpyVariables.push(valueToPush);

                i++;
            }
            callback();

        };

        myFileReader.readAsText(fileToRead);
    }
    else
    {
        window.alert("Not supported");
        return;
    }

}