index. js code:
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 (строки) для отладки, это был вывод
[{"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? Пожалуйста, дайте мне знать, если я делаю что-то совершенно неправильно.