Expressjs：mysql 行对象作为变量发送到 pug 视图的 javascript 打印为未定义

Question

index.js 代码：

app.get("/users", (req,res)=> {
    connection.query("SELECT Name, Currently_Watching FROM `user-data` ", function(error, rows, fields) {
        if (error) {
            res.send(error);
        } else {     
            res.render("users", {data: rows});
        }
    });
})

当我使用 res.send(rows) 调试时，这是输出

[{"Name":"Jim","Currently_Watching":"Atypical, Gumball"},{"Name":"McGill","Currently_Watching":"Nothing"},{"Name":"Random Woman","Currently_Watching":"Boring show"}]

users.pug 代码：

extends layout


block layout-content
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1")
        link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css")
        script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js")
        script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js")
        link(rel="stylesheet", href="https://www.w3schools.com/w3css/4/w3.css")
        link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Raleway")
    body.bgimg   
        div(class="row" id="row")
            div(class="col-sm-4" id="first column"  style="background-color:white;")
            div(class="col-sm-8" id="second column")
            div(class="w3-container" id="test")    
                script(type="text/javascript").
                    function makeUL(data) {
                        var parsedJSON = JSON.stringify(data);
                        var paragraph = document.createElement('p');
                        paragraph.innerText = "test";
                        var list = document.createElement('ul')
                        list.setAttribute("class","w3-ul w3-card-4")
                        var i =0;
                        for (i = 0; i < data.length; i++) {
                            // Create the list item: 
                            var item = document.createElement('li');
                            item.setAttribute("class","w3-bar") 
                            var div = document.createElement('div');
                            div.setAttribute("class","w3-bar-item");
                            var span1 = document.createElement('span');
                            span1.setAttribute("class","w3-large");
                            span1.innerHTML = data[i].Name; 
                            var span2 = document.createElement('span');
                            span2.innerHTML = data[i].Currently_Watching;
                            div.appendChild(span1);
                            div.appendChild(span2);
                            item.appendChild(div); 
                            list.appendChild(item);  

                        } 

                        // Finally, return the constructed list:
                        return list;
                    }
                    document.getElementById('test').appendChild(makeUL('!{data}'));

这是渲染视图的样子：

我尝试对数据使用 JSON.stringify() 但输出没有改变。 此外，生成的 li 元素的数量比我预期的 6 多得多。我觉得数据对象在我将其传递给视图后以某种方式发生了变化。 关于如何正确读取 sql 数据的任何想法？ 如果我做错了什么，请告诉我。

Answer 1

extends layout

block layout-content
    head
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1")
        link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css")
        script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js")
        script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js")
        link(rel="stylesheet", href="https://www.w3schools.com/w3css/4/w3.css")
        link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Raleway")
    body.bgimg   
        div(class="row" id="row")
            div(class="col-sm-4" id="first column"  style="background-color:white;")
            div(class="col-sm-8" id="second column")
            div(class="w3-container" id="test")
                p(class="test")
                ul(class="w3-ul w3-card-4")
                    for row in data
                        li(class="w3-bar")  
                            div(class="w3-bar-item")  
                                span(class="w3-large") #{row.Name}
                                span #{row.Currently_Watching}

阅读： https : //gist.github.com/joepie91/c0069ab0e0da40cc7b54b8c2203befe1