Expressjs:mysql行对象作为变量发送到pug视图的javascript打印为未定义
index.js代码:Expressjs:mysql行对象作为变量发送到pug视图的javascript打印为未定义,javascript,mysql,node.js,express,pug,Javascript,Mysql,Node.js,Express,Pug,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("u
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.sendrows进行调试时,这就是输出
[{"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数据有什么想法吗?如果我做错了什么,请告诉我
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}
阅读以下内容:你在哪里渲染哈巴狗文件?谢谢,它工作得非常好!作为将来的参考,我如何访问script元素中的对象?再次感谢。