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

【问题标题】：Passing an array to a JSON object for Jade rendering将数组传递给 JSON 对象以进行 Jade 渲染
【发布时间】：2011-11-28 08:44:49
【问题描述】：

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

这是玉码：

!!! 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} 变量，就会发生 Unexpected Identifier 错误。

以下是我的 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 页面的变量。无论我做什么，我都会不断收到“意外的标识符”错误。有谁知道我该如何解决这个问题？

谢谢

【问题讨论】：

有什么理由没有让翡翠遍历数组并将列表构建为模板的一部分？在github.com/visionmedia/jade 搜索“迭代”。
嗯，这是另一种看待事物的方式。我明白你的意思，但你能提供一个你所说的例子来回答这个问题吗？我想看看您将如何做到这一点而不会导致“意外标识符”错误。谢谢
可以试试{ranking: JSON.stringify(result)}。需要明确的是，这不是最优的。使用 Jade 的“迭代”功能将列表构建为模板的一部分，完全避免了浏览器为此执行 JavaScript 的需要。
执行此操作var rankArray = JSON.stringify(#{ranking}); 再次出现意外标识符错误。 var rankArray = {ranking: JSON.stringify(#{ranking})}; 也是如此。我仍然看不到直接在 HTML 中构建列表如何避免我得到的 JavaScript 错误，因为每次 JS 尝试评估 #{ranking} 它都会触发错误。
我上面的建议应该放在路由中，而不是模板中。

标签： node.js pug

【解决方案1】：

查看上面的 cmets 并进行更多调查，这是我发现的工作：

在你的 javascript (/controller) 上使用它：

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

在玉模板上：

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

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

【讨论】：

在执行此操作之前，请确保排名不包含任何未转义的用户可控字符串：escape.alf.nu/2
真的很有帮助...非常感谢。你的 ans 保存了我 1 天的工作

【解决方案2】：

这对我有用。

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

服务器端：

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

客户端：

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

【讨论】：

【解决方案3】：

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

res.render('template', pArrayOfData);

而在玉码中：

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

【讨论】：

【解决方案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();

【讨论】：