it-swarm.com.de

Objekt an den Client in node/express + ejs übergeben?

Ich habe ein ziemlich großes Objekt, das ich an eine Funktion in einem Client-Skript übergeben muss. Ich habe versucht, JSON.stringify zu verwenden, habe jedoch mit diesem Ansatz ein paar Probleme gehabt - meistens auf die Leistung bezogen. Kann man so etwas in ejs machen?

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

Und in meinem Client-Skript würde ich dieses Objekt an eine Funktion wie diese übergeben

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

Wenn ich das versuche, bekomme ich entweder

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

oder

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

Das ist das erwartete Verhalten. Ihre Template-Engine versucht, aus Ihrem Objekt eine Zeichenfolge zu erstellen, die zu [Objektobjekt] führt. Wenn Sie wirklich solche Daten weitergeben möchten, haben Sie das richtige getan, indem Sie das Objekt als String festgelegt haben.

10
Pickels

In Node.js:

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

In EJS:

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

SICHERHEITSHINWEIS : Verwenden Sie diesen Befehl nicht, um ein Objekt mit benutzerdefinierten Daten zu rendern. Es wäre möglich, dass jemand wie Little Bobby Tables eine Teilzeichenfolge einfügt, die die JSON-Zeichenfolge unterbricht und ein ausführbares Tag oder ähnliches startet. In Node.js sieht das zum Beispiel ziemlich unschuldig aus ...

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

dies kann jedoch dazu führen, dass ein vom Client bereitgestelltes Skript in den Browsern der Benutzer ausgeführt wird, wenn diese eine Farbe wie die folgende eingeben:

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

Wenn Sie vom Benutzer bereitgestellte Inhalte einbeziehen müssen, lesen Sie bitte https://stackoverflow.com/a/37920555/645715 , um eine bessere Antwort mit Base64-Codierung zu erhalten

68
prototype

Denken Sie, es gibt eine viel bessere Möglichkeit, ein Objekt an die EJS zu übergeben. Sie müssen sich nicht mit den Methoden JSON.stringfy und JSON.parse befassen. Diese sind etwas knifflig und verwirrend. Stattdessen können Sie die for-in-Schleife verwenden, um die Schlüssel Ihrer Objekte zu verschieben. Beispiel:

wenn Sie ein Objekt wie eine solche Hierarchie haben

{
    "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"
            }
        ]
    }
}

Auf der EJS-Seite können Sie Ihr Objekt wie folgt schleifen.

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

In diesem Beispiel kann [key] die Werte 'index', 'home' und 'about' annehmen, und der Unterschlüssel kann ein beliebiges untergeordnetes Element sein, z. B. 'url', 'path_to_layout', 'path_to_data'.

1
btargac

Wenn Sie Vorlagen verwenden, ist es viel besser, die Werte in der Vorlage abzurufen, beispielsweise ob der Benutzer angemeldet ist oder nicht. Sie können die lokalen Daten senden mit 

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

Vom serverseitigen Code aus senden Sie Benutzerdaten.

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

Was Sie haben, ist ein Ergebnis wie dieses [{'re': 'tg'}]

Sie müssen es tatsächlich wiederholen. Sehen Sie Javascript während der Schleife https://www.w3schools.com/js/js_loop_while.asp

Dann rendern Sie es mit ejs in Ihr Frontend ... ich kann nicht helfen, ich verwende hbs

0
Mimigirl