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

CL. · Accepted Answer · 2012-12-03 20:59:49Z

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).

answered Dec 3, 2012 at 20:59

CL.

182k18 gold badges241 silver badges282 bronze badges

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

Comments

Jose Vega · Accepted Answer · 2012-12-03 18:49:09Z

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

Wow you guys made my day! Makes sence to go for a single query and use javascript to go through the results, Thanks CL and Jose!

Collectives™ on Stack Overflow

Wrong order when using Javascript and SQLite

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related