Nodejs jade模板后台传的Object变量,另一个请求取出来是自动转成Array

Nodejs jade模板后台传的Object变量,另一个请求取出来是自动转成Array

比如在 post 请求里

req.flash(“data”,{bj:100,sh:200});

get请求里 取得 data

var data= req.flash(“data”); [ { bj: 100, sh: 200 } ]

如果再传到模板用 res.render(‘page’, {data:JSON.stringify(data[0]));

用 var data= !{data} 这样取 空值的话最后解析出来 是var data=

有值的话提示 SyntaxError: missing ] after element list var data= [object Object] 如果用 if (!{data}) { var data=!{data}; } 空值解析出来是 if() 会报语法错误

如果是传列表 res.render(‘page’, {data:JSON.stringify(data)); 就可以 只不过页面里是一个列表,每次再用下标选一下 没法直接传object 只能从object -> list -> object


2 回复

Node.js Jade模板后台传的Object变量, 另一个请求取出来是自动转成Array

问题描述

在使用Node.js时，我们经常需要在不同的请求之间传递数据。例如，在一个POST请求中，我们将一个对象（Object）存入req.flash，但在GET请求中取出时，这个对象却变成了数组（Array）。这会导致一些问题，特别是在将数据传递给Jade模板时。

示例代码

假设我们在一个POST请求中存储了一个对象：

app.post('/post', function(req, res) {
    req.flash('data', {bj: 100, sh: 200});
    res.redirect('/get');
});

而在GET请求中取出数据时：

app.get('/get', function(req, res) {
    var data = req.flash('data'); // 这里data变成了[[Object]]
    res.render('page', {data: JSON.stringify(data[0])});
});

在Jade模板中使用这些数据时：

script.
    var data = !{data};
    console.log(data);

解决方案

为了解决这个问题，我们可以先将对象转换为字符串，然后再在客户端进行解析。这样可以避免类型转换带来的问题。

  1. 服务器端：将对象转换为字符串后传递给模板。
app.get('/get', function(req, res) {
    var data = req.flash('data'); // 这里data变成了[[Object]]
    res.render('page', {data: JSON.stringify(data[0])});
});
  1. 客户端：在Jade模板中使用JavaScript来解析字符串。
script.
    var data = !{data};
    try {
        data = JSON.parse(data);
        console.log(data); // 输出 {bj: 100, sh: 200}
    } catch (e) {
        console.error("Failed to parse data", e);
    }

解释

  • JSON.stringify(data[0]) 将对象转换为JSON字符串。
  • 在Jade模板中，!{data} 直接输出了字符串。
  • 使用 JSON.parse(data) 在客户端将字符串解析回对象。

通过这种方式，我们可以确保数据在不同请求之间正确传递，并且可以在模板中正确地使用这些数据。


根据你的描述，问题主要出现在如何正确地将一个对象传递给Jade模板并确保其能够被正确渲染。问题的核心在于req.flash()返回的是一个数组，即使这个数组只有一个元素。为了正确处理这个问题，我们可以采取以下几种方式：

解决方案

方法1：直接在服务器端处理数据

在服务器端，我们可以先解构或获取对象本身，然后再将其传递给模板。

// 假设你已经有一个Express应用
app.post('/some-route', function(req, res) {
    req.flash("data", {bj: 100, sh: 200});
    res.redirect('/another-route');
});

app.get('/another-route', function(req, res) {
    let data = req.flash('data');
    // 如果你知道data数组只有一个元素，可以直接解构
    let { bj, sh } = data[0] || {};
    res.render('page', { bj, sh });
});

在Jade模板中：

if bj && sh
    p Beijing: #{bj}, Shanghai: #{sh}
else
    p No data available.

方法2：使用JSON.stringify()在服务器端处理

如果你确实需要通过JSON.stringify()来处理数据，可以这样做：

app.get('/another-route', function(req, res) {
    let data = req.flash('data');
    res.render('page', { jsonData: JSON.stringify(data[0]) });
});

在Jade模板中：

script.
    var data = !{jsonData};
    if (data)
        console.log(data.bj); // 访问bj属性

这种方法避免了直接在模板中使用复杂的逻辑，并且保证了传递的数据格式一致。

总结

主要问题在于req.flash()返回的是数组，即便这个数组仅包含一个对象。为了解决这个问题，你可以选择在服务器端直接处理数据（如解构或使用JSON），或者通过字符串化后再在客户端解析。这样可以避免模板中的复杂逻辑，并确保数据能正确渲染。

回到顶部