将数组传递给 Jade 渲染的 JSON 对象 [英] Passing an array to a JSON object for Jade rendering

问题描述

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

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".

这是翡翠代码:

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

正如你所看到的，这真的很简单，我只是用 node.js 传递给 Jade 的 #{ranking} 变量中的内容提供的信息填充一个 div.第二行的警报不会触发，因为一旦我尝试分配 #{ranking} 变量，就会发生意外标识符错误.

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.

以下是我在node.js中用express的代码

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,
        });
    });
});

我创建了一个包含结果数组的对象，将查询中发现的结果放入其中，然后将其传递给渲染引擎.console.log(results) 调用正确打印了 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 } ] 
}

我真的不知道如何处理传递给 Jade 页面的变量.无论我做什么，我都会收到意外标识符"错误.你们中有人知道我该如何解决这个问题吗?

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?

谢谢

推荐答案

查看上面的评论并进行更多调查，以下是我发现可行的方法:

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

在您的 javascript (/controller) 上使用它:

Use this on your javascript (/controller):

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

在玉模板上:

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

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

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

这篇关于将数组传递给 Jade 渲染的 JSON 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！