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

Solution

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);
});

Comments

[Deendayal Garg]

You can not do both. res.json send only the data where as res.render will render the template passed to render method. What you want? can you explain?

[olo]

I need to pass DB to angular, but if I don't have res.render, my page got errors. how ever looks like only res.json can send DB successfully, so if there is a way to have template render also pass DB thanks

[Yerken]

What do you mean by pass DB to angular? I can already see you are passing documents from mongo DB back to your client.

[olo]

Thanks if I don't use res.render(), only use res.json the page looks like a broken page. as you can see that I have 'mydata': docs , is there a way to get Angular to get mydata variable ? Thanks

[olo]

Thanks, but I don't get Mongo database, if I use this method. the object I get is like html stuff.

[jacksparrow92]

@olo Updated my answer

[olo]

but if we don't use render, how do we have Content-Type header as I use jade.

[jacksparrow92]

@olo When you use the res.json() express itself will set the content type to application/json for you. When you use res.render() express will load and render the template with the given data and sends it to the client along with a text/html content type.

[olo]

Thanks a lot. I can get databae if I use res.json. however jade template needs res.render. I can't get the template/page displayed. I don't think this question I made it very clear, but I create a new question. stackoverflow.com/questions/36331499/… I think it is more clear than this one

[jacksparrow92]

@olo If this is not an answer to your problem, you must edit your question to clarify your problem. See my updated answer for what exactly you meant in your question.

[olo]

Thank you for your updated answer, that is exactly what I want. much appreciated

[olo]

I didn't know I need to create another one like router.get('/data.json' to get the database passed. so I think router.get('/data.json ... -< this /name can be anything. :)