Pass node Array to JavaScript in ejs file

Question

I want to pass the Array from my app.js into JavaScript from my EJS File. In my loop function I want to fill some data into objects to push them into a JS Array for an appointment Calendar. But I can't pass the data.. Here's my Code Snippet:

app.js:

router.route ('/torauswahl').get(function (req, res) {

    Buchung.find(function (err, buchungen) {
        if (err)
            return res.send(err);

        res.render('torauswahl',{
            buchungen: JSON.stringify(buchungen)
        });
    });
});

And the JS in my EJS:

var appointments = [];
        var appointment = {};
        var buchungArray = <%=buchungen %>;

        for(var i=0; i < buchungArray.length; i++) {
            var monat = 1 + buchungArray[i].from.getMonth();
            var von = -1 + buchungArray[i].from.getHours();
            var vonMin = buchungArray[i].from.getMinutes();
            var bisMonat = 1 + buchungArray[i].from.getMonth();
            var bis = -1 + buchungArray[i].to.getHours();
            var bisMin = buchungArray[i].to.getMinutes();

            if (bisMin === 0) {
                bisMin = bisMin + "0";
            }
            if (vonMin === 0) {
                vonMin = vonMin + "0";
            }

            appointment[i] = {
                calendar: buchungArray[i].tor,
                start: new Date(buchungArray[i].from.getDate(), monat, buchungArray[i].from.getDay(), von, vonMin, 0),
                end: new Date(buchungArray[i].to.getDate(), bisMonat, buchungArray[i].to.getDay(), bis, bisMin, 0)
            }
            appointments.push(appointment[i]);
        }

Where i declare the buchungArray, IntelliJ shows me an Error with : Expression expected. Im thankful for any help! Cheeres, Mert

"Where i declare the buchungArray, IntelliJ shows me an Error" — Well, presumably it is trying to treat your EJS template as JavaScript … which it isn't. Does the code work when it is rendered and sent to the browser? — Quentin
– Quentin, Commented Jan 14, 2020 at 11:25
No. The second code section shows the EJS template, not the JavaScript you get when you render it. — Quentin
– Quentin, Commented Jan 14, 2020 at 11:25
@Quentin I don't know.. I'm new in learning EJS and have to excecute JavaScript with the rendered variable I passed in my app.js — Mert Silva
– Mert Silva, Commented Jan 14, 2020 at 11:26

Quentin · Accepted Answer · 2020-01-14 11:38:30Z

2

<%=buchungen %> escapes data for inserting into HTML but you are inserting it into a <script> where normal HTML rules for escaping don't apply.

You can get the raw output with <%- buchungen %>.

Your IDE is still likely to complain as it tries to process your EJS template as if it were pure JavaScript. You might want to store the data somewhere else such as in a data attribute.

<script data-buchungen="<%=buchungen %>">
    var buchungArray = JSON.parse(document.currentScript.dataset.buchungen);
    // etc
</script>

answered Jan 14, 2020 at 11:38

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mert Silva Over a year ago

Thanks for your answer. but I have still the problem, that strings are not formatted like I said in the comment above. do you know why?

Quentin Over a year ago

For the same reason, but it doesn't matter because normal HTML escaping rules do apply in the attribute value, so the browser will have decoded them by the time it passes document.currentScript.dataset.buchungen to the JS.

Mert Silva Over a year ago

Okay perfect, thank you! But I think there's something wrong in my loop function, because I can't see the appointment objects.. do you know why?

Mert Silva Over a year ago

I get an error in my browser: TypeError: null is not an object (evaluating 'document.currentScript.dataset') is it normal?

Quentin Over a year ago

@MertSilva — No. jsbin.com/lacalezivi/edit?html,console works fine for me.

Collectives™ on Stack Overflow

Pass node Array to JavaScript in ejs file

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related