Loading a textfile in javascript / asynchronous nature

Question

I need to read a text file into an array in Javascript.

1) I got this basic code off of stackoverflow:

var myArray = [];
$.get("../MyFile.txt", function(data){
  myArray = data.split('\n');                   
});

2) The code works great when called from the original loading of a php page. 3) The code never works when the php page is called from another php page (via a window.location.href setting). The code seems to start, but I suspect, due to the asynchronous nature of javascript, it is not finished, and code execution continues. My file is a list of about 260,000 words. That may sound like a lot, but it normally seems to load in under a second. myArray needs to be populated before I can do anything valid. I tried to use asynch: false, but I am still having this problem. Thanks for any ideas... No matter how I try to outsmart this problem, like reloading or checking the size of the array, I am still confronted an array that is not populated when it needs to be.

Put the code that relies on the array being populated **inside** the callback function. — Pointy, Dec 24 '13 at 16:44
I don't know your full code, so try changing `../MyFile.txt` to the full URL of the file. — Cilan, Dec 24 '13 at 16:45
No, I don't think Pointy is correct with respect to the possible duplicate. As stated, I get the correctly populated array if the page is loaded directly. I EVENTUALLY get the array populated if the page is loaded via window.location.href, but not until after it's already needed. Man of Snow's comment similarly seems to be invalid as well; I'm not getting any error about the file not being found (and again, the array is eventually populated, but too late). I can't place reliant code inside the callback function. It's simply too much code. — n as, Dec 24 '13 at 16:54
lol...suggesting that @Pointy is wrong is definitely not the way to go. You might want to look at his profile before making a claim like that. — m59, Dec 24 '13 at 16:58
Well... sorry... I certainly did't intend to offend anyone, whether they have a basic or glorious profile. — n as, Dec 24 '13 at 17:17
@nas it's OK - it's not an *exact* duplicate, but it's basically the same problem. The way JavaScript allows you to "wait" is that it provides the callback facility - the one you're already using! All you need to do is put the code that relies on the completion of the HTTP request **inside** the callback. (It doesn't have to all be in there of course; you can put it in a separate function and just call that function from the callback.)' — Pointy, Dec 24 '13 at 17:34

m59 · Answer 1 · 2013-12-24T17:01:34.223

You just need to use a callback to send the data to the functions that need it. You can't just arbitrarily use myArray somewhere later in the code because it has to be chained from the callback of the ajax call.

$.get("text.txt", function(data){
  var myArray = data.split('\n');
  myCallback(myArray);
});

function myCallback(someArray) {
  console.log(someArray);
}

Here's a live demo (click) you can mess with.

Regarding your comment that you "can't" put the code in the callback because there is too much - this is flawed for two reasons. One: you have no choice. You have to use the callback. The only way this could work otherwise is if you have very slow code and the global variable you have (that's bad practice) happens to get the data set before the code that needs it tries to use it. That means your code is probably really slow, and that's definitely not an answer. Secondly, if there's too much code, you probably don't have it divided up into functions in any kind of appropriate manner. Nonetheless, you can just put all of it into a function and use that function as the callback. These are basic javascript principles.

In case that was unclear:

$.get("text.txt", function(data){
  var myArray = data.split('\n');
  my10000LinesOfCode(myArray);
});

function my10000LinesOfCode(someArray) {
  console.log(someArray);
  //10,000 lines of code here.
  //but really, break up your code
}

Thanks, I can try this, but it seems like a work-around to a basic problem: I want to force javascript to simply wait till all the data is in the array. It literally takes less than a second on a normal page load. From what I understand of javascript/php, the point is to load as much of a page as fast as possible. — n as, Dec 24 '13 at 17:16
@nas using the callback IS forcing javascript to wait until the data is in the array. That's what it's for. If there's anything that can be done while you wait on the data, that code can run. If not, it has to wait. — m59, Dec 24 '13 at 17:24
@nas You simply **cannot** "force JavaScript to wait** as you can in a language that provides a synchronous I/O facility. — Pointy, Dec 24 '13 at 17:32
@Pointy yeah, that's a good way of putting it. It's not waiting but rather only running when what you tell it to when you tell it to. — m59, Dec 24 '13 at 17:37

Loading a textfile in javascript / asynchronous nature

1 Answers1