在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