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 :)

Answer 1

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 += "]";

Answer 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.

Answer 3

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.