在node / express + ejs中将对象传递给客户端？

Question

我有一个很大的对象，需要将其传递给客户端脚本中的函数。 我尝试使用JSON.stringify，但是这种方法遇到了一些问题-主要与性能有关。 是否可以在ejs中执行类似的操作？

app.get('/load', function(req, res) {
    var data = {
        layout:'interview/load',
        locals: {
            interview: '',
            data: someLargeObj
        }
    };
    res.render('load', data);
});

在我的客户端脚本中，我会将这个对象传递给类似这样的函数

<script type="text/javascript">
    load(<%- data %>); // load is a function in a client script
</script>

当我尝试这个我得到

<script type="text/javascript">
    load();
</script>

要么

<script type="text/javascript">
    load([Object object]);
</script>

Answer 1

在Node.js中：

res.render('mytemplate', {data: myobject});

在EJS中：

<script type='text/javascript'>
  var rows =<%-JSON.stringify(data)%>
</script>

安全说明 ：请勿使用它来渲染具有用户提供的数据的对象。 像Little Bobby Tables这样的人可能会包含一个破坏JSON字符串并启动可执行标签等的子字符串。 例如，在Node.js中，这看起来很无辜。

var data = {"color": client.favorite_color}

但是如果用户输入的颜色如下，可能会导致在用户的浏览器中执行客户端提供的脚本：

"titanium </script><script>alert('pwnd!')</script> oxide"

如果您需要包括用户提供的内容，请参见https://stackoverflow.com/a/37920555/645715 ，以获得使用Base64编码的更好答案

Answer 2

那是预期的行为。 您的模板引擎正在尝试从您的对象创建一个字符串，该字符串导致[Object object]。 如果您真的想要传递这样的数据，我认为您通过对对象进行字符串化来做正确的事情。

Answer 3

如果使用模板，则最好在模板中获取值，例如，是否登录用户。 您可以使用以下方式获取发送本地数据

<script>
    window.user = <%- JSON.stringify(user || null) %>
</script>

从服务器端代码，您正在发送用户数据。

res.render('profile', {
    user: user.loggedin,
    title: "Title of page"
});

Answer 4

认为将对象传递给ejs时有更好的方法，您不必处理JSON.stringfy和JSON.parse方法，这些方法有些棘手和令人困惑。 相反，您可以使用for in循环来移动对象的键，例如：

如果您有一个像这样的层次结构的对象

{
    "index": {
        "url": "/",
        "path_to_layout": "views/index.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "default"
            }
        ]
    },
    "home": {
        "url": "/home",
        "path_to_layout": "views/home/index.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "home"
            }
        ]
    },
    "about": {
        "url": "/about",
        "path_to_layout": "views/default.ejs",
        "path_to_data": [
            "data/global.json",
            {
                "data/meta.json": "about"
            }
        ]
    }
}

在EJS端，您可以像这样循环yourObject；

<% if ( locals.yourObject) { %>
  <% for(key in yourObject) { %>
    <% if(yourObject.hasOwnProperty(key)) { %>
      <div> <a class="pagelist" href="<%= yourObject[key]['subkey'] %>"><%= key %></a></div>
    <% } %>
  <% } %>
<% } %>

在此示例中，[key]可以采用“ index”，“ home”和“ about”值，并且子项可以是其任何子级，例如“ url”，“ path_to_layout”，“ path_to_data”

Answer 5

您所拥有的是这样的结果[{'re'：'tg'}]

您实际上需要循环它。 请参阅javascript while循环https://www.w3schools.com/js/js_loop_while.asp

然后，用ejs在您的前端呈现它...我对此无能为力，我使用hbs