How to res.json and res.render at the same time, pass mongo db to angularjs?

Question

I use express, which comes with jade template engine. app.js

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

for each template, I will need to have res.render to have the html header rendered, if I don't use res.render, the template/page won't show. routes/index.js

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Bookshop' });
});

router.get('/data', function(req, res, next) {
    res.render('data', { title: 'Bookshop | Categories' });
});

router.get('/items', function(req, res, next) {
    res.render('items', { title: 'Bookshop | Items' });
});

in app.js I've got my MongoDB set up correctly.

var mongojs = require('mongojs');
var db = mongojs('book', ['books']);

What I am going to achieve is to pass MongoDB database to angular, then loop in jade file. myscript.js

app.controller('appCtrl', function ($scope, $http) {
   $http.get('/data').then(function(res){
        console.log(res.data);
        $scope.books = res.data;
    });
});

data.jade file looks like this

p(ng-repeat="item in books")
    span {{item.name}}
    span {{item.barcode}}
    span {{item.price}}

Right now I am stuck on how to pass database to myscript.js. I am unable to do this way in app.js

router.get('/data', function(req, res, next) {
    var db = req.db;
     db.zero.find(function (err, docs) {
        res.json(docs)
    });
});

the reason is jade template is being used, and need to use res.render to get the page showed correctly, however if I use router.get('/data', function(req, res, next) { res.render('data', { title: 'Bookshop | Categories' }); }); I am unable to pass database.

I understand I am unable to use res.render and res.json the at same time. is there a solution for pass database to angular? or do I have to convert jade to html? I am sure if I use html file I can use res.json

Thanks

Answer 1

No. res.render() renders a template and send it to the client. The response Content-Type header when using res.render() would be text/html for example. But res.json() sends data in json format to the client, thus the Content-Type header for the response will be application/json.

UPDATE

You have to create two routes in order to achieve what you want. The first route will render your jade template. And in order to retrieve data from server as JSON in Angular controller you need to use another route. For example:

router.get('/data', function(req, res, next) {
    res.render('data', { title: 'Bookshop | Categories' });
});

router.get('/data.json', function(req, res, next) {
    var db = req.db;
    db.myCollection.find(function (err, docs) {
        if(err) {
            // Handle error
        } else {
            res.json({title: 'Data', 'mydata': docs});
        }
    });
});

And in the Angular controller you use the second route like below:

$http.get('/data.json').then(function(res) {
    console.log(res.data);
});