如何在公共JS文件中使用通过Express res.render发送的JSON

Question

Thanks in advance for your help. I have a question that has been bothering me and I am sure it is absurdly simple.

On an app.get request I am calling an external api from express and then using res.render to send a jade file and the json.

I can successfully manipulate this data within jade files, and JavaScript written directly in the jade file.

However, I cannot for the life of me figure out how to manipulate this JSON from a JavaScript file referenced from the outputted HTML.

For example:

router.get('/dashboard', function (req, res, next) {

  // Call the external api and get data.
  // Parse the data

  res.render('dashboard', {
      data: data
  });

});

The dashboard.jade file then uses this data to do cool stuff.

if #{data.isNew} === true {do cool stuff}

I have also written some JavaScript that uses this data directly into the dashboard.jade file itself. But, I would prefer to write and use this JavaScript in a file called scripts.js that is referenced from the Jade file.

script(src='scripts.js')

I cannot access this data - I have tried multiple syntax to try to get it to work but have miserable failed.

My question is this, how do I work with JSON that has been res.rendered() to a view from within a JS file referenced from that rendered view?

Answer 1

You need to declare a variable inside dashboard.jade that then uses interpolation to output the data into a string:

 script.
   var myData = #{JSON.stringify(data)};

The Jade engine will output that as a valid string that can then be used by any script loaded on that page.