Error Setting Headers After They are Sent - Node.js - json

Question

I'm building an api with nodejs to interact with both the client(android) and the admin(web).
When the api is started, it works fine for the admin and the views are rendered properly but when I connect the client to the api, I get an error/warning in server console like:
App at port 4003
db connection opened successfully
Categroies Count: 2
Error: Can't set headers after they are sent.
at validateHeader (_http_outgoing.js:494:11)
at ServerResponse.setHeader (_http_outgoing.js:501:3)
at ServerResponse.header
(E:\nodeCMSApp\node_modules\express\lib\response.js:767:10)
at ServerResponse.json
(E:\nodeCMSApp\node_modules\express\lib\response.js:264:10)
at Categories.find.select.exec.then.data
(E:\nodeCMSApp\routes\admin_categories.js:20:22)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:13880) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 1): Error: Can't set headers after they are
sent.
(node:13880) [DEP0018] DeprecationWarning: Unhandled promise rejections
are deprecated. In the future, promise rejections that are not handled
will terminate the Node.js process with
a non-zero exit code.
Here's my api code snippet:
router.get('/', (req, res) => {
Categories.find({})
.select('title slug image _id')
.exec()
.then(data => {
if (data) {
res.status(200)
.json({
success: true,
count: data.length,
categories: data
})
// I understand that the problem lies here
res.render('admin/all_categories', {
categories: data
});
} else {
res.render('all_categories', {
categories: null
});
}
})
.catch(error => {
console.error(error);
res.send('Error 404');
});
});
I understand that it's because I have already rendered a view with the response object and I'm calling it again to return some json for the client.
My question is how do I render the view and return json data for the client concurrently withoutany errors?
Thanks.

Answer 1

In your code, you are sending two responses to user if all goes well:
if (data) {
res.status(200).json({
success: true,
count: data.length,
categories: data
});
// I understand that the problem lies here
res.render('admin/all_categories', {
categories: data
});
}
In the moment you perform some call to res.json, res.send, res.redirect, res.render, etc, you are sending the proper headers to user (browser) so, in your case, after res.status(200).json you are trying to send res.render and is not possible because first res.json started sending the result to the user. I guess you want to render all_categories with "data" so you should render the template in backend (compile) before send it to the user.