Node JS sort array passed with Handlebars template client side

Question

I'm developing a simple web app, using nodeJS, express, MongoDB and Handlebars. Server side I use express-handlebars:

var exphbs = require('express-handlebars');
// View Engine
app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', exphbs(
    {
        defaultLayout:'layout',
        helpers: { /*my helpers*/}}));

So, when I query the db I want to show the result to the client in a page: /* some code */ router.get('/', function(req, res) {

    /*query to mongo DB with mongoose*/
    Coll.find(queryParams, function(err,coll){
        if(err) {
                    console.log(err);
                    throw err;
                }
                else {
                    res.render('index', {'coll': coll});
                }
    });

Showing the result is quite simple with handlebars:

{{#each coll}}
{{this}}
{{/each}}

But I would like to allow the user to sort this array of elements without interact again with the server, given that the query results would be the same and will change only the order. the html code would be:

<select id=id>
<option>sort1</option>
<option>sort2</option>
</select>
{{#each list}}
{{this}}
{{/this}}
<script>
$(document).ready(function () {
    $('#id').change(function(){

//DO SOME STUFF WITH LIST
});
</script>

Does it exist a method to sort client-side the array passed via res.render(...) ? If the user choose an option in a select tag, can I use AJAX to modify the list? And how? (always without interact with the server and without execute again the same query on mongoDB)

PS: I'm a beginner with nodeJS and Handlebars, please be patient!

score 0 · Answer 1 · edited May 23 '17 at 10:30

Your current approach is executing a handlebars template on the server and passing the resulting string produced as part of the rendered html.

You have two choices - re-interpret the html on the client side to put it into an array that can be sorted and then try to reformulate the array into html..., or make an AJAX call to the server to get the data an process it entirely in the client code.

The first approach is tricky and results in code that is very difficult to maintain. The latter choice is considerably better and gives you much greater flexibility.

To do this, you will need to pass the data back using res.send or res.json (see this link for more details rather than res.render. You can keep a reference to the original data passed in your JavaScript code so that you can allow sorting later on.

Then you will want to execute your handlebars template client side (or manipulate using JavaScript - though using handlebars is easier) by passing it a reference to your data from the AJAX call.

There is a lot to do to accomplish what you want. I would start with being able to get the data from a res.json() call (or res.send()), and writing to the console the data you get. Then, you can focus on client-side template compiling and execution. Finally, you can add script code to enable sorting the data in various ways.

Node JS sort array passed with Handlebars template client side

1 Answers1