在Jade脚本中未定义NodeJS和Jade / Pug变量？

Question

When I pass a variable over to jade, it looks like it works correctly, for example #{myvar} works but, when I try to call it in a script block in Jade, it doesn't load at all. Upon doing a typeof(myvar) in my script block it said that it was undefined at one point but now it doesn't return anything. My code looks something like this:

- typeof(rm120[0].description) <---- Returns string
div#change !{rm120[0].description} <----- Works perfectly fine
div#test 

script.
  change.innerHTML = "test code" <------ Works perfectly fine
  test.innerHTML = rm120[0].description 
  test.innerHTML = typeof(rm120)
  test.innerHTML = typeof(locals.rm120)

all the lines after the first one in script. seems to never load or just get ignored and I'm extremely confused as to why I can't use the objects I passed through from my node.js file in my script block. Any help would be much appreciated!

Answer 1

The script tag in Pug renders text which is sent to the client to run as client side Javascript. As server side variables don't exist on the client, they need to be passed across to the client somehow.

Two possible ways are rendering the variables in Pug or passing the data out via an AJAX call.

Render

Rendering variables into the Javascript is the simplest method to pass data but I tend to keep this limited to very simple, bootstrap data required for the JS App.

script.
   let rm120 = !{JSON.stringify(rm120)}
   console.log(rm210)

AJAX

Using an API endpoint to pass JSON objects out is more complicated to setup as there needs to be a server endpoint and you start dealing with async requests. As an app starts passing more data, or more complex data, then it's a more scalable method of sharing.

script.
   fetch("/api/v1/rm120")
     .then(response => response.blob())
     .then(body => {
        console.log(body)
     })
     .catch(err => console.log(err))

Answer 2

I assume you're trying to insert the actual value of rm120[0].description on your html file, which you want to run as a script once it's delivered to client side. In which case you need to use #{} or !{}.

If you don't, then the word "rm120[0].description" will be written onto your html file, quite literally. And when it runs client side, there won't be an rm120 presumably.