Nested functions not returning

Question

I'm building a phonegap application. I'm using an web sql and everything works fine until data retrieval.

function getItemGroups(){

    var items_groups = new Array();
    var db = window.openDatabase("merbokDB", "1.0", "MerbokDB", 5232394);

    db.transaction(
        function(tx){
            tx.executeSql('SELECT * FROM item_groups',[],
                function(tx,result){
                    if(result.rows.length > 0){

                        var len = result.rows.length;

                        for (var i=0; i<len; i++){

                            items_groups.push(result.rows.item(i).item_group);

                        }
                        console.log(items_groups.join());

                    }
                }
                ,errorCB);
        },
        errorCB);

    return items_groups;
}
var myproducts = getItemGroups();

My problem was when I run the code "myproducts" variable is blank. but the I can see

console.log(items_groups.join());

following line printing the values in console. Is I'm wrong in the way I returning?

Because tx.executeSql() is a async method. The variable items_groups didn't get value from db query before return statement. — Chickenrice
– Chickenrice, Commented Jun 25, 2013 at 16:25

David · Accepted Answer · 2013-06-25 16:25:02Z

3

I'm not 100% familiar with the framework you're using, but a good guess is that the functions being passed into each step in the chain are for asynchronous callbacks. So there's no guarantee that they're going to run before the statement after them runs. So what's essentially happening is that this line:

return items_groups;

is being executed before any of those inner functions are being executed. So it's just returning its initial value, which is an empty array.

Moments later (maybe even milliseconds later), the inner functions are executed and the console log output is seen.

When working with asynchronous functionality like this, you can't rely on the sequence of lines of code being executed in order. Instead of performing your logic "on the next line" you have to perform it in a callback function of some sort. In this case, your final callback after the data is retrieved appears to be this:

function(tx,result){
    if(result.rows.length > 0){

        var len = result.rows.length;

        for (var i=0; i<len; i++){

            items_groups.push(result.rows.item(i).item_group);

        }
        console.log(items_groups.join());

    }
}

Whatever you're going to do with the myproducts variable would need to be initiated in that function.

answered Jun 25, 2013 at 16:25

David

221k42 gold badges247 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Achintha Samindika Over a year ago

Thanks for the explanation. as your instructions I tried the following thing. but I can't still figure out how is that doing. I'm still a beginner to js. jsfiddle.net/auE9w/1

David Over a year ago

@AchinthaSamindika: You're still trying to "return" the result. Asynchronous code doesn't work that way. In this case you're returning a value from a function where the caller of that function (the parent function in the hierarchy, in this case executeSql()) has no knowledge of that returned value and doesn't use it. Invert the logic. Instead of thinking "what should this function send back to the caller" in this case, think "what should this function do next?" getItemGroupsSucces() should set the value of myproducts or even initiate whatever other process needs that value.

Collectives™ on Stack Overflow

Nested functions not returning

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related