0

First of all let me tell you that I'm not using Express but only Pug (formerly know as Jade).

I read a JSON object from an external file. Inside the object, one of the keys has a string value that looks like this:

This is #[strong cool]

Jade outputs it exactly as that but I'd wish to have the interpolation work for the read string. Any clues?

Thanks in advance!

Dorian Tudorache
  • 61
  • 1
  • 9

3 Answers3

3

You need to use This is #{strong cool}. Note the curly brackets.

And in case you miss it in the docs, Pug changed how interpolation works for attributes

It used to be 

a(href="#{link}")
a(href='before#{link}after')

but now you should use 

a(href=link)
a(href=`before${link}after\`)
a(href='before' + link + 'after')
Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
  • That doesn't work either. The issue comes with the string being interpreted exactely as a string as it's read from the json. It needs a parsing method. I do know about interpolations in attributes. Thanks! – Dorian Tudorache May 06 '16 at 15:57
  • How are you pulling your data in? I use `locals: { 'clients': JSON.parse( fs.readFileSync('./markup/data/clients.json', { encoding: 'utf8' }) )` in my gulp task. Or maybe you mean something like `This is strong#{JSON.stringify(cool)}`? – Jason Lydon May 06 '16 at 16:18
  • Hey Jason, I'm pulling data the same way you're doing it. But imagine in your ./markup/data/clients.json you have the following: `{ "title": "This is #[strong cool]" }`. Outputting it in a heading tag would go like this: `h2=jsonobj.title`. I want it to output exactly this: `

    This is cool

    `. In pug, without grabbing the string, you would do it like this: `h2 This is #[strong cool]` and please note that interpolation operators are right with the square brackets.     – Dorian Tudorache May 06 '16 at 20:29
1

My dummy solution for this was to use This is <strong>cool</strong>

This works.

Dorian Tudorache
  • 61
  • 1
  • 9
0

It is called "interpolation".

It means that "messages()" is escaped, fx if you have following code:

var randomText = <p>this is a text</p>

p= randomText which would normally, unescaped, produce just what the actual string is:

<p> this is a text</p> but if I typed this:

p!= randomText it would actually become a p tag, looking exactly like this:

this is a text

Hope it helps you :-)

You can read more about in the documentation, here: https://pugjs.org/language/interpolation.html

Daniel
  • 469
  • 5
  • 15