15

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
html(lang="en")
    head
    title= "Rankings"

    body
        h1 Ranking

        div(id="rankings")

    script(type='text/javascript')

        function fillRanking(){
            var rankArray = #{ranking};
            alert("inside fillranking");
            var divElement = document.getElementById("rankings");
            for(var i = 0; i< rankArray.length; i++){
                divElements.innerHTML += "" + i+1 + ". " + rankArray[i].Username + " " + rankArray[i].Points;
            }
        }

        fillRanking();

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 < results.length; i++){
            result.ranking[i] = results[i];
        }
        //render the ranking with all the info
        console.log(result);
        res.render(__dirname + '/pages/ranking/ranking.jade', {
            ranking: result,
        });
    });
});

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?

Thanks

7
  • 4
    Any reason you don't have jade iterate over the array and build the list as part of the template? Search "Iteration" at github.com/visionmedia/jade.
    – Ryan Olds
    Nov 28, 2011 at 8:52
  • Well, it's another way of seeing things. I got what you mean, but can you please provide an example of what you said as a response to this question? I would like to see how would you do it without incurring into the "Unexpected identifier" error. Thanks
    – Masiar
    Nov 28, 2011 at 9:18
  • Could try {ranking: JSON.stringify(result)}. To be clear, this is not optimal. Building the list as part of template with using Jade's 'Iteration' functionality completely avoids the need for the browser to execute JavaScript for this.
    – Ryan Olds
    Nov 28, 2011 at 9:28
  • Doing this var rankArray = JSON.stringify(#{ranking}); gives again Unexpected identifier error. Same happens with var rankArray = {ranking: JSON.stringify(#{ranking})};. I still don't see how building the list directly in HTML would avoid the JavaScript error I get, since every time JS tries to evaluate #{ranking} it fires the error.
    – Masiar
    Nov 28, 2011 at 9:43
  • My above suggestion should be placed in the route, not the template.
    – Ryan Olds
    Nov 28, 2011 at 10:07

4 Answers 4

31

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.

2
  • 1
    Before you do this, make sure that ranking doesn't contain any unescaped user-controllable strings: escape.alf.nu/2
    – James
    Feb 17, 2014 at 9:17
  • really helped...thanks a lot man. your ans saved my 1 day work Sep 12, 2014 at 13:15
10

This works for me.

JSON.stringify the array (or any arbitrary JSON object really) on the server and then JSON.parse it on the client.

server-side:

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

client-side:

var rankArray = JSON.parse( !{JSON.stringify(ranking)} );
3

Because I also use the array from the controller for iteration, I did this:

res.render('template', pArrayOfData);

And in the jade code:

script(type='text/javascript').
            var _histData = !{JSON.stringify(pArrayOfData)};
0

I encountered the same problem and was able make it work with a slight variation (thanks to the solutions above).

From my code:
Backend:

Stringify the JSON array

router.get('/', function(req, res) {
    var data = JSON.stringify(apiData);  // <====
    res.render('gallery', { data: apiData });
}); 

Frontend:

Stringify again with the !{}

    function injectDataOnView() {

        var data = !{JSON.stringify(data)}; // <====
        var divElement = document.getElementById('data');
        divElement.innerHTML = data[1]['id']; // <=== just a test, so no for loop
    }

    injectDataOnView();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.