Nested HTML5 Web SQL Query Issued after Entire For Loop Processed

Question

In this query listed below, my for loop is executing 4 values. In the first alert(id), it is alerting those 4 distinct values. However, in the nested query, the alert statement is printing out the last id value only, 4x with different max(b.id) values. I'm confused. Does anyone know what may be happening? Could a race condition be occurring?

My goal is to place an Ajax call in the nested query, which has input values based on both id and b.id. I am currently doing this, but the value in the ajax call for the "id" is the same for all 4 different calls, which messes up the return data. Thanks.

database.db.transaction(function (tx) {
            tx.executeSql('SELECT id, name from programs d', [], function (tx, results) {
                for (var i = 0; i < results.rows.length; i++) {
                    var id = results.rows.item(i)['id'];
                    var name = results.rows.item(i)['name'];
                        alert(id);

                    tx.executeSql('SELECT max(b.id) + 1 max from people b where b.sid = ?',
                        [id],
                        function (tx, results) {
                            lastRecord = results.rows.item(0)['max'];
                            alert(id + "last rec: " + name);
                        }
                    );
                }
            },
            function (event) { alert(event.message); });

Could you clarify? Is your problem that the [id] used in the 2nd tx.executeSql is always the last one in the result set from the first query? — Mike Ryan
– Mike Ryan, Commented Mar 8, 2012 at 20:03
Yeah that's what is happening: My problem is that the the query for the first nested query tx.executeSql('SELECT max...') is executing properly. But in the scope of the alert under that, alert(id + "last rec: " + name) the id is only displayed as the last element. — Garrett
– Garrett, Commented Mar 8, 2012 at 20:05
This is causing a nested Ajax call in the first nested query to fail for 3/4 cases. — Garrett
– Garrett, Commented Mar 8, 2012 at 20:05
I did a console.log on the value of i within the first nested loop (select max...), and it shows that the value of i = 4. (4 times). I was expecting it to show, 0 1 2 3, but it appears that the outer for loop executes before the callback of the nested sql executes. — Garrett
– Garrett, Commented Mar 8, 2012 at 20:07
Yes, that is correct -- at the time that the 2nd executeSQL function finishes and triggers it's callback function, you've already stepped through the loop completely and i is = 4. So it's going to be that forever -- to preserve the value you should pass it into your callback function as a parameter. — Mike Ryan
– Mike Ryan, Commented Mar 8, 2012 at 20:11

Mike Ryan · Accepted Answer · 2015-07-21 19:27:15Z

As per my comments, you to return a closed function to bind the parameter correctly.

A much simpler example is the following:

Running this produces 4 alerts, all showing 4:

for (i=0;i<4;i++) {
    setTimeout( function() { alert(i)}, 1000);
}

Running this produces 4 alerts, showing 0/4, 1/4, 2/4, 3/4.

for (i=0;i<4;i++) {
    setTimeout(function(inneri) { 
        return( 
            function() { 
                alert(inneri + "/" + i);
            }
        );
    }(i), 1000);
}

where I've named inneri the value that was preserved upon closure. Note that i, itself is still referring to the outer scope, and thus is 4 (which is what is true at time of execution, since that is the value of i when it dumps out of the for loop, as we're delaying the execution using setTimeout().

The first case is a simpler version of what you're doing, whereas you want the second case.

Rewriting your js (and hoping I get all these ( and {'s in the right place :) ) gives:

database.db.transaction(function (tx) {
      tx.executeSql('SELECT id, name from programs d', [], function (tx, results) {
            for (var i = 0; i < results.rows.length; i++) {
                var id = results.rows.item(i)['id'];
                var name = results.rows.item(i)['name'];
                alert(id);

                tx.executeSql('SELECT max(b.id) + 1 max from people b where b.sid = ?',
                    [id],
                    function(innerId) { 
                       return (
                          function (tx, results) {
                                lastRecord = results.rows.item(0)['max'];
                                alert(innerId + "last rec: " + name);
                          }
                       );
                    }(id) //be careful to avoid the ";" here!
                );
            }
        },
        function (event) { alert(event.message); 
    });

Where I have inserted:

 function(innerId) { 
    return (
         function (tx, results) {
             lastRecord = results.rows.item(0)['max'];
             alert(innerId + "last rec: " + name);
         }
    );
 }(id)

in. This function is called immediately via the (id) and returns a function that takes tx and results as arguments and does the appropriate action.

I have checked braces/parenthesis, but don't have a direct way to verify that I didn't make any typos.

Collectives™ on Stack Overflow

Nested HTML5 Web SQL Query Issued after Entire For Loop Processed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related