Why isn't express's res.render called inside the PUT method? - express

Question

I have an express app with ejs view engine.
In the ejs template, I have a button with an onClick event to trigger a fetch request:
<button class="remove-btn" onclick="removeGroceryItem('<%= index %>')" >Remove</button>
the fetch function
function removeGroceryItem (id) {
fetch('/', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ groceryItem: id })
})
.then((value)=> console.log(value))
.catch((e)=>console.error(e))
}
The express app route handler:
/* PUT grocery list*/
app.put('/', function(req, res, next) {
groceryItemsContainer.splice(Number.parseInt(req.body.groceryItem), 1)
res.render('index', {
title: 'Express Grocery List App',
notification: 'removed',
groceryList: groceryItemsContainer
})
res.end();
})
The PUT request is received with a status of 200. But the res.render does not seem to be triggered -- why is that??

Answer 1

It appears from your comment that you are expecting the result of your res.render() to display in the browser. That is NOT what an Ajax call using fetch() does from your browser Javascript. It ONLY gets the content back to your Javascript. It does not display anything in the browser.
So, the content you res.render() goes back to your Javascript in your web page and the console.log(value) you have in your Javascript in the web page should actually be showing the content in the console from the res.render(). If you want that content to display in the browser, then you need to insert that content into the current browser DOM yourself with your own Javascript.