[creativecoding]

So I need to retrieve an unknown amount of pages from a directory and put their contents inside of an array.

I have a PHP file listing the files in the directory and I wrote this javascript to complete the rest of it:

$.get('getPage.php?id=index', function(contents){
		contents = contents.split(';');
		for(var i=0; i<contents.length; i++){
                        alert(i);
			if(contents[i] != ''){
				$.get('pages/' + contents[i], function(data){
					pages[i] = data;
					alert('pages[' + i + '] = ' + data);
				});
			}
		}
	});

As you can see, I have a few alerts in there. The for loop works fine. It counts from 0 to 3. But for some reason the second alert always displays "pages[4] = (the page data)" and it does that for every page (sets the content's to pages[4]). Making the pages array undefined, undefined, undefined, and the last retrieved page's contents. What gives?

[Atli]

The problem is that the $.get on line #6 uses a callback function, and within that function you are using a counter variable that belongs to the scope outside the function.

All that happens on line #6 is that you set the callback for the $.get function. It's very unlikely that the AJAX request completes before the for loop moves onto the next iteration. So, when the AJAX request finally completes, the i value is different from what it was when the request callback was set. Most likely it will always be the last index used by the for loop.

So, in your code, every pages[i] = data; call is setting the third element of the pages array, leaving that element the only element that is set, and only with the data from the last AJAX request to finish. (And note, depending on the time it takes to complete each request, that my no even be the last request set.)

What you want to be doing is using i right away, without waiting for the callback. For that you need to use another function. So instead of doing this:

var pages = [];
for (var i = 0; i < 3; ++i) {
	$.get('page?id=' + i, function(data) {
		pages[i] = data;
	});
}

You'd want to do this:

var pages = [];
var getPageData = function(index) {
	$.get('page?id=' + index, function(data) {
		pages[index] = data;
	});
}
for (var i = 0; i < 3; ++i) {
	getPageData(i);
}

There the i value is used immediately and passed into another scope, so when the request finally finishes the index will remain unchanged.

This post has been edited by Atli: 07 July 2012 - 06:00 PM
Reason for edit:: Syntax error.

[creativecoding]

Ah, thanks a ton!