How send JSON data from pug to javascript

Question

I send a JSON object from my mangoDB to the html page in this way:

router.get('/index', function (req, res, next) {
    GenoverseInstance.find({name: req.query.name}, function (err, instance) {
        if (err) {
            res.send(err);
            throw err;
        } else if (instance.length) {
            console.log('Object loaded');
            // object of the user
            console.log(instance[0]);
            res.render('index', {object: instance[0]});
        }
    });

});

I can use it in the html like this:

.containerCustom
  .head
    h1
      | #{object.name}

But I can not use it in my javascript which is included in the html page: script.

alert(object.name);

How is it possible?

Thanks

Answer 1

object is only defined in your Pug template and used to generate HTML that is then sent to the browser. After the HTML is generated, this object is consumed and disappears. It has nothing to do with the page's JS code.

If you want this data to be available in the JS code, then : from the generated page, make another (Ajax) request to your server, asking for this same data.

Answer 2

this is because your response is saved in local scope and you don't pass that response to global scope where u can access it from outside. I just make 1 snippet for you. Check it, i hope this will help you. Also if you don't understand scopes i suggest you to go and read some articles, like w3school or this . Also if you don't know what is asynchronous request read about them too.

 /* ############################### */ // So if you want to access response from your request you must save them or pass them // This is one way to have access to your response outside by saving to global variable // Creating variable where we will hold our response from request // Global scope start here var data = ''; function getResponse(res) { // Here is opened Local scope where u have no access from outside // and now here u have the response from your request console.log('function data', res); // you can do stuff here with that response data = res; } setTimeout(function() { var response = [1,2,3]; // Now here we will save response to our data so we can access it from global scope // But remember that is async request data = response; console.log("local scope response ", response); }, 1000); setTimeout(function() { console.log("global scope data", data); // here data hold ur response data from your async request }, 1100); /* ############################### */ // This is another way to have access to your response outside by passing it to function function getResponse(res) { // and now here u have the response from your request console.log('function data', res); // you can do stuff here with that response data = res; } setTimeout(function() { var response = [1,2,3]; // other way pass response to your function and do what u want with that data getResponse(response); console.log("bracked scope response ", response); }, 1000); 

Answer 3

As shown in the comments this link is very useful reference , thanks to @IsaacGodinez. It's possible to use this line of code to get the entire object:

var data = !{JSON.stringify(object).replace(/<\//g, '<\\/')};

Or if you just want an element of the object:

var name = "#{object}";