Reference Error in passing server side data to client side Node js?

Question

I was going through some examples of sending server side data to client side in Node js. But then I tried the following, it gave me Reference Error. I would like to know where am I making the mistake? Thanks.

server.js -

var express = require('express')
require('highcharts');
var app = express();
app.engine('html', require('ejs').renderFile);
dirname = "C:/Users/user/WebstormProjects/untitled/public";

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);
});
app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
});



app.get('/', function (req, res) {
    var data = 5;
    res.render("data.html",{Data:data});

});

data.html -

<html>
<head>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js" ></script>
    <script src="http://code.highcharts.com/highcharts.js" ></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>

<script type="text/javascript">
    var d = JSON.stringify(Data);
    console.log(d);
</script>


</body>
</html>

There's nothing in `data.html` that gets filled in by a server-side template. Your `var d = JSON.stringify(Data);` is looking for a **client-side** variable called `Data`, which doesn't exist, hence the error. I suggest having a read through [*Using template engines with Express*](http://expressjs.com/en/guide/using-template-engines.html) — T.J. Crowder, Feb 05 '17 at 15:36

score 0 · Accepted Answer · edited May 23 '17 at 10:29

To elaborate on the comment by @T.J.Crowder:

1. You need to be aware of who executes your code and when it is executed:

While the code in server.js is executed on each request on the server,
your code in data.html (the stuff in the tag) will eventually be executed in the client browser. Eventually here means that the browser might not support Javascript or more likely deny executing of it. Also it will only be executed once the code has actually been downloaded.

2. What does follow from this?

Because the code is executed by two different Javascript engines, maybe even on two different machines, you cannot as easily pass data from one to the other as our code assumed. There are basically two options you have now:

You could inline your data into the html your server.js serves to the client. This basically requires you to modify the html before sending. You can try this approach by writing some data manually into the file to see that it works. You then need to figure out how best to manipulate the html your are sending out, using a template engine might be helpful for that.

var myData = { key: "value" };
The more common approach with Javascript and data passing is to use AJAX, or asynchronous Javascript and XML. Here your client will contain code sending/requesting data to/from the server. You could use jQuery for that or just basic Javascript.

3. AJAX example code

server.js

app.get('/', function (req, res) {
    res.render('data.html');
});

app.get('/data', function (req, res) {
    res.json({ data: 5 });
});

client.js (the code in the script tag of data.html, be aware this code assumes that the jQuery.js library is loaded in the client)

$.get('/data', function (data) { console.log('got data', data); });

If I were to make the above code work, what should I fix? Apart from using a template engine. — , Feb 05 '17 at 15:44
Though I was able to see the response.json data in my browser when I rendered /data but the console log was still empty. when I checked. Thanks though. I really appreciate your help. — , Feb 05 '17 at 15:57
I used the jQuery API wrongly in my first iteration of the example. You might check again, or have a look at the jQuery API documentation for $.get(): https://api.jquery.com/jquery.get/ — pintxo, Feb 05 '17 at 15:59

Reference Error in passing server side data to client side Node js?

1 Answers1