Wrong order when using Javascript and SQLite

Question

Dear Stackoverflow users,

The database we created is as follows:

function populateDB(tx) {
    tx.executeSql('DROP TABLE IF EXISTS Gerechten');
    tx.executeSql('CREATE TABLE IF NOT EXISTS Gerechten (id INTEGER PRIMARY KEY AUTOINCREMENT, Cat TEXT NOT NULL, Name TEXT NOT NULL, Desc TEXT NOT NULL)');
    tx.executeSql('INSERT INTO Gerechten(Cat,Name,Desc) VALUES ("Voorgerecht", "Tomatensoep", "Heerlijke romige tomatensoep")');
    tx.executeSql('INSERT INTO Gerechten(Cat,Name,Desc) VALUES ("Hoofdgerecht", "Pizza", "Kaas en tomaat")');
    tx.executeSql('INSERT INTO Gerechten(Cat,Name,Desc) VALUES ("Voorgerecht", "Groentensoep", "Goed gevulde groentensoep")');
    tx.executeSql('INSERT INTO Gerechten(Cat,Name,Desc) VALUES ("Voorgerecht", "Kippensoep", "Kippensoep met stukjes kip")');
    tx.executeSql('INSERT INTO Gerechten(Cat,Name,Desc) VALUES ("Hoofdgerecht", "Biefstuk", "Biefstuk, wordt geserveerd met patat of rijst")');
}

I have a problem with a Javascript loop, the code is as follows:

function queryDB(tx){
    tx.executeSql('SELECT DISTINCT "Cat" FROM Gerechten',[],function (tx, results) {
        var len = results.rows.length, i;
        msg = "<p>Found rows: " + len + "</p>";
        document.write(msg + '<br/>');
        for (i = 0; i < len; i++){
            document.write(results.rows.item(i).Cat + '<br/>');
            tx.executeSql('SELECT * FROM Gerechten WHERE "Cat" ="'+results.rows.item(i).Cat+'"',[],function (tx, results2) {
                var len2 = results2.rows.length, y;
                msg = "<p>Found rows: " + len2 + "</p>";
                document.write(msg + '<br/>');
                for (y = 0; y < len2; y++){
                    document.write(results2.rows.item(y).Name + '<br/>');
                }
            }, null);
        }
    }, null);
}

The problem with the code is that the Categories get outputted first after which the names are displayed (in the right order):

Voorgerecht
Hoofdgerecht
  Tomatensoep
  Groentensoep
  Kippensoep
  Pizza
  Biefstuk

The right order should be:

Voorgerecht
  Tomatensoep
  Groentensoep
  Kippensoep
Hoofdgerecht
  Pizza
  Biefstuk

Does anyone know how to solve this issue?

Kind regards,

Dennis

Answer 1

Your problem is that executeSql executes your function (its last parameter) asynchronously, so your outer loop is likely to print all categories before the queries of the inner loop have finished executing.

You should use only a single query so that you can process all results in the correct order. Try something like this:

SELECT * FROM Gerechten ORDER BY Cat

and print the category whenever the value in the Cat column changes (see Jose's answer).

Answer 2

You honestly don't need to be querying the database so many times, assuming this:

SELECT * FROM Gerechten

and your results contain the following, you could do as below and still produce the same results . Obviously you will need to implement it to match your web sql database api, but the logic should remain the same.

var results = [
    {
        "Cat" : "Voorgerecht",
        "Name" : "Tomatensoep",
        "Desc" : "Heerlijke romige tomatensoep"
    },{
        "Cat" : "Hoofdgerecht",
        "Name" : "Pizza",
        "Desc" : "Kaas en tomaat"
    },{
        "Cat" : "Voorgerecht",
        "Name" : "Groentensoep",
        "Desc" : "Goed gevulde groentensoep"
    },{
        "Cat" : "Voorgerecht",
        "Name" : "Kippensoep",
        "Desc" : "Kippensoep met stukjes kip"
    },{
        "Cat" : "Hoofdgerecht",
        "Name" : "Biefstuk",
        "Desc" : "wordt geserveerd met patat of rijst"
    }
];

//sorts by the Category
results.sort(compare);
var initial = "";

for(var y = 0; results.length; y++) {
    if(initial != results[y].Cat){
        initial = results[y].Cat;
         document.write(initial + "<br/>");
    }

    document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + results[y].Name + "<br/>");
}


function compare(a,b) {
    if (a.Cat < b.Cat)
        return 1;
    if (a.Cat > b.Cat)
        return -1;    
    else
      return 0;
}

OUTPUT

Voorgerecht
     Tomatensoep
     Groentensoep
     Kippensoep
Hoofdgerecht
     Pizza
     Biefstuk