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，其中包含由node.js传递给Jade的#{ranking}变量中的内容。第二行上的警报不会触发，因为一旦我尝试分配#{ranking}变量，就会发生意外标识符错误。

以下是带有express

的node.js中的代码

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

Answer 3

因为我也使用控制器中的数组进行迭代，所以我这样做了：

res.render('template', pArrayOfData);

在玉代码中：

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

Answer 4

我遇到了同样的问题，并且能够稍微改变一下（感谢上面的解决方案）。

来自我的代码：
后端：

对JSON数组进行字符串化

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

前端：

再次使用！{}
进行字符串化

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

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

4 个答案: