将数组传递给JSON对象以进行Jade渲染

Question

我有一个用express编写的node.js服务器，并在某个时刻将一个数组发送到某个.jade页面。问题在于，渲染Jade页面时，Jade编译器将数组呈现为[object Object]，而Chrome上的JavaScript编译器则抱怨说“意外标识符”。

这是Jade代码：

!!! 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();

如您所见，这确实很简单，我只是#{ranking}将由node.js传递给Jade
的变量内所给的信息填充到div中。第二行的警报不会触发，因为一旦我尝试分配#{ranking}变量，就会发生“意外标识符”错误。

以下是我的node.js中带有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,
        });
    });
});

我在结果数组中创建了一个对象，将在查询中找到的结果放入其中，并将其传递给呈现引擎。该console.log(results)调用可以result正确打印对象，例如：

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

我真的不知道如何处理传递给Jade页面的变量。无论我做什么，都会不断收到“意外标识符”错误。你们当中有人知道我该如何解决吗？

谢谢

Answer 1

查看上面的评论并进行更多调查，以下是我发现的工作：

在您的javascript（/控制器）上使用它：

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

在玉模板上：

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

之所以有效，是因为！{}不会执行转义。