动态可视化html标签中来自Sqlite3的数据

Question

当我尝试显示来自sqlite数据库的数据时，我陷入了如何可视化数据列表的困境。我想要一个解决方案，其中如果删除或添加元素，则列表会动态更改。 我是Web开发的新手，所以我不知道如何为客户端呈现数据。

我尝试了一种从客户端的服务器检索数据的方法，但是没有运气。

我的问题是。如何在客户端检索数据并用所需的HTML标记将其括起来？

<h2>Assets</h2>
                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Asset Id</th>
                                        <th>Owner</th>
                                        <th>Manufacture</th>
                                        <th>Model</th>
                                        <th>Service date</th>
                                        <th>Date for registration</th>                                  
                                    </tr>
                                </thead>                            
                                <tbody>                     
                                <tr>
                                    <!-- Headers -->
                                    <td>1</td>
                                    <td>Nicolai Dørfler</td>
                                    <td>Dewalt</td>
                                    <td>DCE 328</td>
                                    <td>2020-05-23</td>
                                    <td>2019-05-19</td>
                                </tr>
                                <tr>
                                    <!-- Data -->
                                    <td>2</td>
                                    <td>Andreas Thystrup</td>
                                    <td>Makita</td>
                                    <td>Wle 345f</td>
                                    <td>2020-05-10</td>
                                    <td>2018-01-20</td>
                                </tr>

// client-side
<script language="javascript">
            var serverURL= "http://localhost:8080";
            //var serverURL= "http://realm.itu.dk:8080"
            var who= "JSt"; //!!!!!  remember to change this
            function load (url) {
                var x = new XMLHttpRequest();
                x.open('GET', url, false);
                //console.log("####-> " + x.responseText);
                x.send();
                return x.responseText;  
            }   
            function clearF(form) {
                form.manuName.value = "";
                form.modelName.value = "";
                form.service.value = "";
            }

            function listT(){
                document.getElementById("displayresult").innerHTML= load(serverURL+"/?op=list&who=" + who);
            }       

            function listall(){
                //document.getElementById("displayresult").innerHTML= load(serverURL+"/?op=listall");
                let assets = load(serverURL+"/?op=listall");
                console.log("###" + assets);

            }


        </script>

// server 
var sqlite3= require("sqlite3").verbose();
var http= require("http");
var url= require("url");
var moment = require("moment");
var render = require('render-html');

moment().format;

//Open database
const port = 8080;
var db= new sqlite3.Database("Asset.db"); 
console.log("opened database");
// console.log(__dirname + "/views/index.html");
var resp= "empty";

http.createServer(function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.writeHead(200, {'Content-Type': 'text/html'});

    console.log("Server started");
    var q= url.parse(req.url, true).query;
    console.log(q.op+" "+q.manuName+" "+q.modelName+" "+q.serviceDate+" "+q.who);
    // using asset class
    var asset = new Asset(q.manuName, q.modelName, q.serviceDate);  
    var who= q.who;
    const serviceDate = q.serviceDate;

    function sendResult(res, response) {
        //console.log(response);
        res.write(response);
        res.end();
    }

    function listAll() {
        db.all("SELECT * FROM Assets",
        function(err, rows) {       
            // console.log(rows);
            var resp= new Object();
            resp.assets= [];
            //console.log("listing all");                   
            rows.forEach((row) => { 
                // const respAsset = [row.ManuName, row.ModelName, row.ServiceDate, row.RegistrationDate]; 
                const assetRes = {
                    "id" : row.Aid,
                    "who" : row.Who,
                    "manu" : row.ManuName,
                    "model" : row.ModelName,
                    "service": row.ServiceDate,
                    "reg" : row.RegistrationDate,
                };                                  
            resp.assets.push(assetRes);
            });
            sendResult(res, JSON.stringify(resp));      
            // console.log(JSON.stringify(resp));
        });
    }

    switch (q.op) {     
        case "list":
          list();
        break;

        case "listall":
          listAll();
        break;

        default:
            if (asset.getManufacture()!= null) { search(); } else { sendResult(res, "Error in URL"); };
    };
}).listen(8080);