Question

i am using persistence.js in a project and i am having some issues with pushing results from a query into an array.

// setup the region list array
var regionList = [];

// ping the database and grab all of the regions
var regions = Region.all().order('name');

// for each result, push the "display name" to the regions list array
regions.list(null, function(results) {
    results.forEach(function(r) {
        regionList.push(r.displayName);
    });
});

// alert the regions list array
alert(regionList);

the “alert” produces absolutely nothing, however when i try to alert within the “regions.forEach”…i get results. it seems like the scope of the array is not being maintained, but i am not certain. from my understanding, if i declare a variable outside of a function, then that variable should be available at any time until the page ends/closed…am i wrong on this? if i am running through a standard for loop, i can push dynamic data into the array – it really seems to be an issue with pushing while within a persistence.js function.

any guidance would be greatly appreciated. i could do this in my sleep with php, but this is my first go with persistence.js. thanks in advance for the assistance!

cheers!
-jon-

Answer 1

This has nothing to do with scoping, but rather with asynchronous callbacks.

persistence.js is an asynchronous framework, therefore code is not necessarily executed top-to-bottom. This is a common mistake people make who just got started with asynchronous Javascript.

With the regions.list(...) call (you can leave out the null argument, by the way), you yield execution — you basically say: whenever you retrieve the results from this query, call this function (that’s the anonymous function you pass to list). The execution then proceeds, executing the alert while regionList is still empty (because at that time, the query hasn’t finished executing yet).

Later, when the query finishes execution the callback function is called filling the array.

So, how to fix it: move the alert inside the callback function:

regions.list(null, function(results) {
    results.forEach(function(r) {
        regionList.push(r.displayName);
    });
    alert(regionList);
});