trying to send some data from nodejs to script in html

Question

I am using hbs as view in frontend. I tried to send data to my script in html from nodejs like this :

router.get('/home',authController.isLoggedIn, (req ,res) => {
if(req.user){
    db.query('SELECT * FROM posts ORDER BY id desc ', (error,results) => {
        if (error) {
            console.log(error);
        } else {
            let categories;
            db.query('SELECT * FROM categories', (error,result) => {
                if (error) {
                    console.log(error);
                } else {
                    console.log(result);
                    categories = result;
                    return res.render('home',{
                        results: results,
                        categories: categories
                    });
                }
            });
        }
    });
}else {
    res.redirect('/login');
}

});

then when i am trying to call it here in script using javaScript it tells me something is wrong

<script>
        alert(results);
 </script>

I want to know how correctly call the the object in script

edit:

the data should be something like this :

  [
  RowDataPacket { id: 1, category: 'Music' },
  RowDataPacket { id: 2, category: 'Memes' },
  RowDataPacket { id: 3, category: 'Tech' }
  ]

Does this answer your question? [Express - Send a page AND custom data to the browser in a single request?](https://stackoverflow.com/questions/21172889/express-send-a-page-and-custom-data-to-the-browser-in-a-single-request) — kennarddh, May 20 '22 at 05:30

JuneC · Accepted Answer · 2022-05-20T08:03:59.830

0

For EJS example if pass data msgs:

    res.render("index.ejs", { 
        msgs
     })

js handle data:

    <p>
        <% 
            msgs = msgs.map(function(msg) {
                return '<div>' + msg.name + '</div>' + '<div>' + msg.msg + '</div>'+ '<div>' + msg.time + '</div>'
            }) 
        %>
    </p>

print directly:

    <p><%- msgs.join("<hr />") %></p>

save in global variable

    <script>
        window.serverMsgs = <%- msgs %>;
    </script>

And for handlebars:

    <script>
        window.serverMsgs = {{msgs}};
        alert(window.serverMsgs)


        {{#each results}}
                {
                    "id": {{id}},
                    "category": "{{category}}",
                }
                {{#unless @last}},{{/unless}}
        {{/each}}

    </script>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{title}} - Page Test</title>
</head>
<body>
    <div class="description">{{description}}</div>
    <ul>
{{#datas}}
        <li class="item" id="item_{{index}}"><span>{{time}}</span><a href="{{url}}" class="art">{{title}}</a></li>
{{/datas}}
    </ul>

</body>
</html>

u could check out this similar issue:) How to define an array within a <script> tag inside a hbs view template

edited May 20 '22 at 08:03

answered May 20 '22 at 05:49

JuneC

59
7

i am using hbs as the view so what is the right braces to it ? – Moataz El-Naggar May 20 '22 at 06:02
– JuneC May 20 '22 at 06:09
@MoatazEl-Naggar I add some complement in answer for ur reference – JuneC May 20 '22 at 06:18
got and error saying : Uncaught SyntaxError: Unexpected identifier and showing this : window.serverMsgs = [object Object],[object Object]; alert(window.serverMsgs) as an error – Moataz El-Naggar May 20 '22 at 06:19
added the data. – Moataz El-Naggar May 20 '22 at 06:21
I think data is passing correctly but the data itself has some syntax error. For example: missing “:” – JuneC May 20 '22 at 06:28
If data is not passing through, u will see error like window.xxx = undefined – JuneC May 20 '22 at 06:31
So it may be another problem from the data format – JuneC May 20 '22 at 06:32
I edited the problem so you can see how exactly I'm getting the data and in what format – Moataz El-Naggar May 20 '22 at 06:59
@MoatazEl-Naggar try `Json.stringify(result)` in `res.render` or `alert(Json.stringify(window.msgs))` – JuneC May 20 '22 at 07:10
@MoatazEl-Naggar because `alert` only accept type of string – JuneC May 20 '22 at 07:11
@MoatazEl-Naggar it's better to use `console.log` to debug in front-end – JuneC May 20 '22 at 07:12
hmm it keeps giving me same error...idk but in html tags it is just fine without even stringify the data but with javaScript something is just wrong. – Moataz El-Naggar May 20 '22 at 07:31
Even with console.log? – JuneC May 20 '22 at 07:33
yep still doesn't see the object {{results}} – Moataz El-Naggar May 20 '22 at 07:38
How about window.serverMsgs = {{results}}; console.log(window.serverMsgs) – JuneC May 20 '22 at 07:40
see it like this 'window.serverMsgs = [object Object],[object Object]; console.log(window.serverMsgs)' and saying unexpected identifier. – Moataz El-Naggar May 20 '22 at 07:45
ok I get it, it's because {{}} only accept string – JuneC May 20 '22 at 07:53
try below I just add complement in the answer: {{#each results}} { "id": {{_id}}, "optionText": "{{optionText}}", "votes": {{votes}} } {{#unless @last}},{{/unless}} {{/each}} – JuneC May 20 '22 at 07:55
here is the similar question for ur reference :) https://stackoverflow.com/questions/42315032/how-to-define-an-array-within-a-script-tag-inside-a-hbs-view-template – JuneC May 20 '22 at 08:04

trying to send some data from nodejs to script in html

1 Answers1