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

make a separate route that just returns the json, then get it with client-side javascript. — Kevin B, Mar 22 '18 at 16:12
This is the output of the browser's console: ReferenceError: object is not defined @JuanGonzálezSalinas — PierBJX, Mar 22 '18 at 16:15
In fact, I succeed to use the object in pug but I can not use this object in the javascript which is included in the pug @ThomasKleßen — PierBJX, Mar 22 '18 at 16:16
Then you have to make a call on JavaScript to pass the info, and don't forget to use [JSON.parse()](https://www.w3schools.com/js/js_json_parse.asp). — Juan González Salinas, Mar 22 '18 at 16:16
There is a very good explanation of what you are asking [here](https://stackoverflow.com/questions/8698534/how-to-pass-variable-from-jade-template-file-to-a-script-file#11985095). — Isaac Villanueva, Mar 22 '18 at 16:18
Then you should store that info somewhere and retreive it. Take the advice from @IsaacGodinez. — Juan González Salinas, Mar 22 '18 at 16:20

score 3 · Answer 1 · answered Mar 22 '18 at 16:22

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.

score 0 · Answer 2 · answered Mar 22 '18 at 16:43

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

score 0 · Accepted Answer · answered Mar 22 '18 at 19:06

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

How send JSON data from pug to javascript

3 Answers3