Expressjs: mysql row object sent as variable to pug view's javascript prints as undefined

Question

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});
        }
    });
})

When i used res.send(rows) to debug this was the output

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

users.pug code:

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}'));

This is what the rendered view looks like:

I tried to use JSON.stringify() on the data but the output did not change. Also, the number of li elements generated is much more than my expected figure of 6. I feel like the data object changes in some way after I pass it to the view. Any ideas on how to properly read the sql data? Please let me know if i am doing something completely wrong.

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}

Read this: https://gist.github.com/joepie91/c0069ab0e0da40cc7b54b8c2203befe1