Pug Unbuffered Code Variable Interpolation Not Working but Buffered Code does - express

Question

I'm trying to create an express app using Pug for templating. I cannot figure out why when I am using an unbuffered variable interpolation, the object is undefined but when I remove the dash it seems to work just fine (minus that it literally displays the object)
//index.pug
extends layout
block campground
- var campgrounds = '#{camps}'
.row
each campground in campgrounds
div.col-md-3.col-sm-6
div
img(src=`${campground.image}` class='img-thumbnail')
a(href=`/campgrounds/${campground._id}`)
h4.caption.text-center #{campground.name}
//app.js
app.get('/campgrounds', async (req, res) => {
try {
const camps = await Camp.find();
res.render('index', { camps: camps });
} catch (ex) {
res.status(500).send('internal error');
}
});
Syntax 1:
- var campgrounds = '#{camps}'
Produces:
Syntax 2:
var campgrounds = '#{camps}'
Produces:

Answer 1

I believe that you can:
Remove the row - var campgrounds = '#{camps}' and replace the row each campground in campgrounds on each campground in camps (see the code snippet below).
Or you also can replace - var campgrounds = '#{camps}' on - var campgrounds = camps (you don't need interpolation in code rows).
$(function() {
// in your code you get `camps` from DB
// const camps = await Camp.find();
const camps = [{name: 'Camp1'}, {name: 'Camp2'}, {name: 'Camp3'}];
var json = {
camps: camps
};
// jade compile
// instead of your function res.render(...);
$("#so").html(jade.compile($("#jadehi").html())(json));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.min.js"></script>
<div id="so">SEO(please enable javascript~)</div>
<pre id="jadehi" style="display:none">
.content
.row
each campground in camps
div.col-md-3.col-sm-6
div.
Campground: #{campground.name}
<!-- img(src=`${campground.image}` class='img-thumbnail') -->
<!-- a(href=`/campgrounds/${campground._id}`) -->
<!-- h4.caption.text-center #{campground.name} -->
</pre>