Node + Express, pass array to client on page load?

Question

I'm using Node + Express. On page load, the app calls a remote database, gets data and sends it to a handlebars template. All this is done server side. But I'd like to be able to have this same JSON data be available for the client to interact with. How do I do that?

Example, server displays a table of ten records. I want the client to be able to click on one record and get a details view of just that one record. Thanks.

Here's the code:

app.get('/', function(req, res) {
getDataFromDatabase(function(data) {
    data = JSON.parse(data);
    res.render('index', {
        stuff: data
    });
});

});

function getDataFromDatabase(callback) {

var options = {
    hostname: this.hostname,
    path: this.path,
    port: 80,
    method: 'GET'
}

http.request(url, function(res) {
    var data = '';
    res.on('data', function(chunk) {
        data += chunk;
    }).on('end', function() {
        callback(data);
    }).on('error', function() {
        console.log("error");
    })
}).end()

}

You can have your client query an endpoint which returns the data to your front end. Using a framework like jQuery can make this pretty straight forward. I would start there and then ask more specific questions if you get stuck. — user2263572
– user2263572, Commented Oct 28, 2015 at 17:34
yeah, please ask more specific question after writing some front js, you could prefer a lib/frameworks like angular, ember, backbone, etc. — prasun
– prasun, Commented Oct 28, 2015 at 17:36
How do you get the data as a variable accessible to the client, on page load, when the server is doing all of the work? Do you have to make a redundant call from the client and get a "copy" of the data? — June March
– June March, Commented Oct 28, 2015 at 18:14

Nocturno · Accepted Answer · 2015-10-28 18:45:11Z

1

How do you get the data as a variable accessible to the client, on page load, when the server is doing all of the work? Do you have to make a redundant call from the client and get a "copy" of the data? - June March

If you don't want to make an AJAX call after the page loads to get at the data, you can send it along with the rest of the page inside of a script tag. Not sure which template engine you're using so the following is sudo code (might be Jade, I don't know). Do something like this in your template:

script var data = JSON.stringify(stuff); // <- horrible variable name btw

If you can successfully create a script tag in your template, and initialize a variable with the data you want to pass to the client, you shouldn't have to make another call to the server.

edited Oct 28, 2015 at 18:45

answered Oct 28, 2015 at 18:38

Nocturno

10.1k5 gold badges34 silver badges41 bronze badges

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

1 Comment

June March Over a year ago

The project I'm working on is using Handlebars but the concept you're showing is the important thing and I think it or something like it will work just fine for what I'm doing. Thank you!

Collectives™ on Stack Overflow

Node + Express, pass array to client on page load?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related