使用Javascript和SQLite時順序錯誤

Question

尊敬的Stackoverflow用戶，

我們創建的數據庫如下：

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")');
}

我的Javascript循環有問題，代碼如下：

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);
}

代碼的問題在於，首先輸出類別，然后按正確的順序顯示名稱：

Voorgerecht
Hoofdgerecht
  Tomatensoep
  Groentensoep
  Kippensoep
  Pizza
  Biefstuk

正確的順序應為：

Voorgerecht
  Tomatensoep
  Groentensoep
  Kippensoep
Hoofdgerecht
  Pizza
  Biefstuk

有誰知道如何解決這個問題？

親切的問候，

丹尼斯

Answer 1

您的問題是executeSql異步執行您的函數（最后一個參數），因此外循環可能會在內循環的查詢完成執行之前打印所有類別。

您應該只使用一個查詢，以便可以正確的順序處理所有結果。 嘗試這樣的事情：

SELECT * FROM Gerechten ORDER BY Cat

並在Cat列中的值更改時打印類別（請參閱Jose的答案）。

Answer 2

老實說，您無需多次查詢數據庫，前提是：

選擇*從Gerechten

並且您的結果包含以下內容，則可以執行以下操作，並且仍然產生相同的結果 。 顯然，您將需要實現它以匹配您的Web sql數據庫api，但是邏輯應保持不變。

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;
}

輸出值

Voorgerecht
     Tomatensoep
     Groentensoep
     Kippensoep
Hoofdgerecht
     Pizza
     Biefstuk