Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Passing an array to a JSON object for Jade rendering

Passing an array to a JSON object for Jade rendering


I have a node.js server written in express and at a certain moment I send to some .jade page an array. The problem is that when rendering the Jade page, the Jade compiler renders the array as [object Object] and the JavaScript compiler on Chrome complains about it saying "Unexpected identifier".

This is the Jade code:

!!! 5
    title= "Rankings"

        h1 Ranking



        function fillRanking(){
            var rankArray = #{ranking};
            alert("inside fillranking");
            var divElement = document.getElementById("rankings");
            for(var i = 0; i

As you can see it's really simple, I just fill a div with the info given by what's inside the #{ranking} variable passed by node.js to Jade. The alert on the second line doesn't fire because the Unexpected Identifier error happens as soon as I try to assign the #{ranking} variable.

The following is the code in my node.js with express

app.get('/ranking', function (req, res) {
    //get the first ten people in the ranking
    var firstTen = getRanking(10, function(results){
        //compute the array of results
        var result = {
            ranking: [],
        for(var i = 0; i 

I create an object with inside an array of results, I put the results I found out of the query inside it and I pass it to the rendering engine. The console.log(results) call prints the result object correctly, for example like this:

{ ranking: 
   [ { Username: 'usr1',
       _id: 4ed27319c1d767f70e000002,
       Points: 100 },
     { Username: 'usr2',
       _id: 4ed27326c1d767f70e000003,
       Points: 100 } ] 

I don't really know how to handle the variable passed to the Jade page. Whichever thing I do I keep getting the "Unexpected identifier" error. Does anyone of you know how do I solve this?


Problem courtesy of: Masiar


Looking at the comments above and investigating a little bit more, here's what I've found to work:

Use this on your javascript (/controller):

res.render(__dirname + '/pages/ranking/ranking.jade', {
    ranking: JSON.stringify(ranking),

And on jade template:

function fillRanking(){
  var rankArray = !{ranking};
  alert("inside fillranking");

This works because !{} doesn't perform escaping.

Solution courtesy of: luismreis


View additional discussion.

This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Passing an array to a JSON object for Jade rendering


Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription