0

次のような小さな SQL データベースがあります。

id        name      category
------------------------------
1         name1     category1
2         name2     category2
3         name3     category1
4         name4     category1

そして、次のようにjavascriptとhtmlを使用してdbをフォーマットしたい:

<ul>
    <li>category1
        <ul>
            <li>name1</li>
            <li>name3</li>
            <li>name4</li>
        </ul>
    </li>
    <li>category2
        <ul>
            <li>name2</li>
        </ul>
    </li>
</ul>

SQL 実行をネストできないため、行き詰まっています。カテゴリを表示する方法を見つけましたが、それ以上進むことができませんでした。これが私のJavaScriptです：

var db = openDatabase('dbname', '1.0', 'DB Name', 2 * 1024);

db.transaction(function (tx) {
    tx.executeSql('SELECT DISTINCT category FROM list', [], function (tx, results) {
        if (results.rows.length > 0) {
            for (var i = 0; results.rows.length > i; i++) {
                $('ul').append('<li>' + results.rows.item(i).category + '</li>');
            }
        }
    });
});

ご助力ありがとうございます！

編集: 最終的に 2 つの SQL 実行をネストして、正しい変数を取得できました。しかし、どういうわけか、最初にすべてのカテゴリを取得し、その後で名前を取得します (正しい順序で)。コードを100回チェックしましたが、エラーが見つかりません...

db.transaction(function (tx) {
    tx.executeSql('SELECT DISTINCT category FROM list', [], successCallback);
});

function successCallback(tx, results) {
    if (results.rows.length > 0) {
        for (var i = 0; results.rows.length > i; i++) {
            var result = results.rows.item(i);
            alert('Next Category: '+result.category);
            tx.executeSql('SELECT name FROM list WHERE category = "'+result.category+'"', [], successCallbackTwo);
        }
    }
}

function successCallbackTwo(tx, results) {
    for (var i = 0; results.rows.length > i; i++) {
        alert(results.rows.item(i).name);
    }
}
4

1 に答える 1

0

確かに、「SQL 実行をネスト」できます。2 番目のクエリを最初のクエリの成功コールバックに入れるだけです。しかし、これは単一のクエリで実行できます。

db.transaction(function (tx) {
    // query (might want to add some ORDER BY clause)
    // updated to include nameurl column as suggested
    tx.executeSql('SELECT category, name, nameurl FROM list', [], function (tx, results) {
        // group results based on category
        var grouped = {};
        if (results.rows.length > 0) {
            for (var i = 0; results.rows.length > i; i++) {
                var record = result.rows.item(i);
                if(!(record.category in grouped)) {
                    grouped[record.category] = [];
                }
                grouped[record.category].push({
                    name: record.name,
                    nameurl: record.nameurl
                });
            }
        }

        // build tree from categories and names
        var $tree = $('<ul />');
        $.each(grouped, function(category, records) {
            var $leaves = $('<ul />');
            $.each(records, function(ix, record) {
                var $leaf = $('<li />');
                var $leaflink = $('<a />', {
                    text: record.name,
                    href: record.nameurl
                });
                $leaf.append($leaflink);
                $leaves.append($leaf);
            });
            var $branch = $('<li />', {
                text: category
            });
            $branch.append($leaves);
            $tree.append($branch);
        });

        // insert tree into page
        $(document.body).append($tree);
    });
});
于 2013-03-13T15:37:14.670 に答える