passing arguments from server side to client side Node.js express

Question

Trying to pass arguments from server side to client in Node.js using Express.

I am using the following command on the server side :

for (var i = 0; i < events.length; i++) 
{
    existingEvents.push(events[i]);
}
res.render('index', { locals: {existingEvents: existingEvents}});

And the following code on the client side (jade), inside a script section

var events = "";
      for (var i = 0;i < existingEvents.length;i++)
        {
             if (i == 0)
             {
                 events = "events: [{title: '" + existingEvents[i].summary +"', start: '" + existingEvents[i].start.dateTime + "',constraint: 'businessHours'}";
             }
             else
             {
                 events += ", { title: 'aaaaaaaaa', start: '2016-03-03T13:00:00',constraint: 'businessHours'}";
             }
        }events += "]";

When I debug on chrome i get the following error concerning the existingEvents:

"Uncaught ReferenceError: existingEvents is not defined".

I had a look at this post : Accessing Express.js local variables in client side JavaScript and tried various ways to accomplish it. (tried #{existingEvents} for example).

But nothing worked so far. how would you guys accomplish this? Thanks you very much for you help :)

Hey, can you elaborate a bit ? what do you mean by trying to build JS code? — UserED, Mar 03 '16 at 18:53
What is that string you piece together in the second code sample? — Tomalak, Mar 03 '16 at 18:53
But that string suspiciously looks like dynamically generated Javascript that you want to execute at some point. And my strong advise would be not to go down that route. — Tomalak, Mar 03 '16 at 20:56

luisenrike · Accepted Answer · 2016-03-03T19:01:26.550

Try this:

for (var i = 0; i < events.length; i++) 
{
    existingEvents.push(events[i]);
}
res.render('index', { existingEvents: existingEvents });

and in jade:

script(type="text/javascript").

    var existingEvents = !{JSON.stringify(existingEvents)};

    var events = "";
    for (var i = 0; i < existingEvents.length; i++)
    {
         if (i == 0)
         {
             events = "events: [{title: '" + existingEvents[i].summary +"', start: '" + existingEvents[i].start.dateTime + "',constraint: 'businessHours'}";
         }
         else
         {
             events += ", { title: 'aaaaaaaaa', start: '2016-03-03T13:00:00',constraint: 'businessHours'}";
         }
    } 
    events += "]";

Thank you ! that did the trick :) so basically if I declare it "local" at the server I won't be able to use it later ? — UserED, Mar 03 '16 at 20:24

score 2 · Answer 2 · answered Mar 03 '16 at 18:54

2

Put the following in your jade template before calling your code:

script(type="text/javascript").
    existingEvents = !{JSON.stringify(existingEvents)};

This will create a existingEvents global variable in javascript you can use latter.

answered Mar 03 '16 at 18:54

yeiniel

2,416
15
31

If that's the case please mark the answer as the right one. – yeiniel Mar 03 '16 at 20:35
Thank you for this! – LeggoMaEggo Nov 30 '17 at 09:30

score 1 · Answer 3 · answered Mar 03 '16 at 18:53

If, at the time of page rendering, you want to pass some variables to the client-side Javascript, then you can just generate a <script> tag in the page and define the Javascript variables. This will typically be done as part of your template rendering for the page such that the resulting web page contains something like this:

<script>
var existingEvents = {...};   // some Javascript data in here
</script>

How exactly you get to that rendered script tag depends entirely upon what page rendering template engine you are using.

Then, the Javascript code in the web page can refer to the existingEvents variable in the page.

If, once the page has already been loaded and is running in the browser the page Javascript wants to dynamically fetch some data from the server, then it can issue an Ajax call to the server and request the data. The server would implement a route for that Ajax call and return the data in JSON form. The client would then parse that JSON result and have the data to use as it needs to.

passing arguments from server side to client side Node.js express

3 Answers3