ExpressとSQLite3を利用して、動的に検索できるWebアプリの例です。ここではPOSTメソッドで検索文字を送受信しています。
備忘録1や、EJSの例についてはこちらも参考にしてください。

当初うまく結果が反映されませんでしたが、データベースの処理結果を得る前にWebサーバーが応答していることがわかり、Promiseを利用することで解決しました。Promiseについてはこちらを参考にさせてもらいました。わかりやすい説明で助かりました。

EJSファイル内にJavascriptを記述し、その中で受け取ったオブジェクト配列を展開しているのですが、このあたりがいまいち非効率だなと感じております。おそらくもっとスムーズに行うやり方があると思うのですが、、、勉強不足です。

取得データの表示にはgird.jsを利用しています。使い方はこちらもご参考にしてください。

「イ」を含むチームを検索した例

準備

[備忘録1]と同じファイル構成で動作できます。

コード

index.js

let port = 3000;    //ポート番号
let express = require("express");
let app = express();
app.set("view engine", "ejs");  //テンプレートエンジンの指定
let sqlite3 = require("sqlite3");   //sqlite3
let db = new sqlite3.Database("./sample_data.db");
let bb_dat = {dat:null};    //ejs転送用オブジェクト
//テーブルより全データを取得
db.all("select * from bbteams where team",
    function(err,rows) {
    bb_dat.dat = rows;
});
//ルートにアクセス時index.ejsにbb_datを渡し、応答する
app.get("/",function(req,res){
    res.render("index.ejs",bb_dat); 
});
//POST受信は次の行が必要
app.use(express.urlencoded({ extended: true }));
//POSTされたとき
app.post("/", function(req,res){
    console.log("post:" + req.body.word);   //req.body.inputタグのname　で編集取得
    let keyword = "%" + req.body.word + "%";
    new Promise(function(resolve,reject){    //Promiseで処理待ちさせています
        db.all("select * from bbteams where team like ? ", keyword,
            function(err,rows) {
                if(err){    //エラー時
                    reject(err)
                }else{      //エラーなし
                    resolve(rows);
                }
        });
    }).then(function(e){    //resolev()より呼出し
        bb_dat.dat = e;
        res.render("index.ejs",bb_dat); 
    }).catch(function(e){   //reject()より呼出し
        bb_dat.dat = e;
        console.log(e);
    });
});
//ポート番号を指定してWebサーバーとして起動
let listener = app.listen(port,function(){
    console.log("ブラウザにてlocalhost:" + port + "にアクセスしてください");
});

index.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet">
        <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    </head>
    <body>
        <h1>データベースからの取得</h1>
        <div class="main">
        <div id="gridTag"></div>
        <form method="POST" action="/">
            検索（部分一致）<input type="text" name="word">
            <input type="submit" value="送信">
        </form>
        <script>
            let d = [];
            //ejsにてオブジェクトデータの配列を展開して、格納
            <% for(let e of dat){ %>
                d.push({id:<%= e.id %>,team:"<%= e.team %>", place:"<%= e.place %>"});
            <% } %>
            new gridjs.Grid({
                data : d,
            }).render(document.getElementById("gridTag"));
        </script>
    </body>
</html>

以上、自身の備忘録と、なにかのご参考になればと思い投稿しておきます。

Express+SQLite3備忘録2

準備

コード