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

我有一个用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(); 

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

以下是我的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, }); }); }); 

我创build了一个结果数组内的对象,我把结果从查询里面找出来,然后传给渲染引擎。 console.log(results)调用正确地打印result对象,例如像这样:

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

我真的不知道如何处理传递给Jade页面的variables。 无论我做什么我不断收到“意外的标识符”错误。 你们有谁知道我该如何解决这个问题?

谢谢

看看上面的意见,并进一步调查,这是我发现的工作:

在你的javascript(/ controller)上使用这个:

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

在玉模板上:

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

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

这对我有用。

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

服务器端:

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

客户端:

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

因为我也使用来自控制器的数组进行迭代,所以我这样做了:

 res.render('template', pArrayOfData); 

而在玉代码中:

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

我遇到了同样的问题,并能够使其工作有轻微的变化(感谢上面的解决scheme)。

从我的代码:
后端:

将JSON数组string化

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