Question

I have a pretty heavyweight query on the server that results in a new page render, and I’d like to pass along some of the results of the query to the client (as a javascript array of objects). This is basically so I don’t have to do a separate JSON query later to get the same content (which is mostly static). The data will be useful eventually, but not initially so I didn’t put it directly into the document.

app.get('/expensiveCall', function(req, res) {
    // do expensive call
    var data = veryExpensiveFunction();
    res.render('expensiveCall.jade', {
        locals: {
                data: data,
                }
        });
    });
});

data is a array of objects and only some are initially used. I’d like to pass either the entirety of data over or some subsets (depending on the situation). My jade looks like normal jade, but I would like to include something like

<script type="text/javascript">
var data = #{data};
</script>

but this doesn’t work (it’s an array of objects).

Answer 1

You can’t inline a JS object like that, but you can JSON.stringify it before:

<script type="text/javascript">
  var data = !{JSON.stringify(data)};
</script>