Can't figure out callback on $.get to read text file into an array

Question

I just want to get data from this text file, parse it a bit, and toss it into a couple of arrays. The asynchronous nature of aJax (which I didn't even know I was using...?) means that the array is still being populated before I try to access it. This seems to create a totally useless situation to me, as I need to access the arrays at different times during the users visit to the site. Any ideas?

var words = new Array();
var sylls = new Array();
var csv_file = new Array(); // for word arrays

$(document).ready(function(){
    readWords( addWords );
});

function readWords( process ) {
        $.get('terms.csv', function(data){
                csv_file = data.split('\n');
                    // csv file is now in an array, split into seperate word array and syllable array
                    for (var i = 0; i < csv_file.length; i++) {
                        var both = csv_file[i].split(',');  // split at the comma
                        words[i] = both[0]; // populate word array
                        sylls[i] = both[1]; // populate syllable array
                        //put_word(words[i], sylls[i]);

                    };

            });   
    process(words, sylls);
}

function addWords(w, ss){
    console.log(w);
}

this all eventually returns an empty array.

EDIT--SOLUTION:

I'm not sure why no one suggested this before, but for those of you as frustrated with ajax as I am, here is the easy solution!

var words = new Array();
var sylls = new Array();
var csv_file = new Array(); // for word arrays

$(document).ready(function(){
    get_words();

});

function get_words() {


        $.get('terms.csv', function(data){
            //async: false;
            csv_file = data.split('\n');
                // csv file is now in an array, split into seperate word array and syllable array
                for (var i = 0; i < csv_file.length; i++) {
                    var both = csv_file[i].split(',');  // split at the comma
                    words[i] = both[0]; // populate word array
                    sylls[i] = both[1]; // populate syllable array
                    //put_word(words[i], sylls[i]);
                };
            })
        .done(function() {
            // once it's done DO THIS STUFF
        });

}

My suggestion would be to learn how promises, deferreds and callbacks work, and write your code so it works ***with*** the async nature of ajax calls, not against it. — adeneo, Oct 02 '13 at 21:28
you're process function is outside the callback, so the process function will get called before the callback, you need to move it inside the callback function — dbarnes, Oct 02 '13 at 21:29
This is the same as your earlier question. Please don't do that. — Barmar, Oct 02 '13 at 21:30
CSgoose: Where precisely should I put 'process(words,sylls)'? — prismspecs, Oct 02 '13 at 21:31

score 1 · Answer 1 · answered Oct 02 '13 at 21:39

It looks like process(words, sylls); is outside the $.get() block. .$.get() is an async (by default) request so when your program invokes it, it immediately returns and executes process() without having the necessary data. Just add the process() invocation right before the end of the $.get() block.

Can't figure out callback on $.get to read text file into an array

1 Answers1