Question

I’m building a javascript application using object oriented techniques and I’m running into a problem that I hope someone here can help me resolve.

The following method is designed to return an array populated with rows of data from a web SQL database:

retrieveAllStoreSearches : function(){
    this.db.transaction(
        function(transaction){
            transaction.executeSql(
                "SELECT name,store,address FROM searchResults ORDER BY name ASC",
                [],
                function(transaction, results){
                    var returnArr = [];
                    for(var i = 0; i < results.rows.length; i++){
                        var row = results.rows.item(i);
                        returnArr.push(row.name + ' | ' + row.address);
                    }
                    console.log('Length of returnArr: ' + returnArr.length);
                    console.log(returnArr);
                    return returnArr;
                },
                this.errorHandler
            );  
        }
    );
}

This works exactly as expected when logging the results to the console BUT when I try to call the method in the following snippet (located in a different script – which initialises all objects and is responsible for building the application DOM structure and functionality)

console.log(db.retrieveAllStoreSearches());

undefined is returned.

I can’t figure out what I am doing wrong as when I have used return in a method to allow an object to be accessed from one class and into a different script I have never encountered any problems.

Could anyone provide any pointers on what I might be doing wrong?

Answer 1

Cannot be done, if your function is calling an asynchronous function, the only way to return results is through a callback. That’s the whole point of asynchronous functions, the rest of the code can keep going before the call is finished. It’s a different way of thinking about returning values (without blocking the rest of your code).

So you’d have to change your code to the following (plus proper error handling)

retrieveAllStoreSearches : function(callback){
    this.db.transaction(
        function(transaction){
            transaction.executeSql(
                "SELECT name,store,address FROM searchResults ORDER BY name ASC",
                [],
                function(transaction, results){
                    var returnArr = [];
                    for(var i = 0; i < results.rows.length; i++){
                        var row = results.rows.item(i);
                        returnArr.push(row.name + ' | ' + row.address);
                    }
                    callback( returnArr );
                },
                this.errorHandler
            );
        }
    );
}

Then you can use console.log like the following

db.retrieveAllStoreSearches(function(records) {
    console.log(records ) 
});