将数组传递给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();

正如您所看到的那样,它非常简单,我只需要填充一个div,其中包含#{ranking}由node.js传递给Jade 的变量内部的信息.第二行上的警报不会触发,因为一旦我尝试分配#{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(/ controller)上使用它:

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

在玉模板上:

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

这是有效的,因为!{}不会执行转义.

Answer 2

这适合我.

JSON.stringify服务器上的数组(或任何任意JSON对象)然后JSON.parse在客户端上.

服务器端:

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

客户端:

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