Deleting an element breaks my app and sends an error with an empty object, using Mongo/Mongoose/NodeJS/Express

Question

I am a student who is currently coding a final project for a NodeJS course. I ran into a problem and cannot seem to find any solutions googling it. I am hoping to find some guidance here. Thank you for your help and time in advance!

My problem: My app breaks with a single delete button for "Budget" but it does not break when I delete expense / income elements.

1) my main page

2) When I click and delete budget element, app breaks and sends an empty object as an error message

3) Is where I am getting the budget value from

4) My pug file, using each / in to extract value:

            h1(class="category__titles budget__section") Budget:    
            each budget in budgets
                h2(class="category__subtitle")= budget.budget
                    a(class="blue__bg action__button" href="/update/" + budget._id) Update                
                    a(class="action__button red__bg " href="/delete/" + budget._id) Delete
            h1(class="category__titles") Budget balance
                p(class="category__subtitle")= balance
            h1(class="category__titles blue__bg") Funds Available
            h2(class="category__subtitle")= historyTotal
            h1(class="category__titles red__bg") Expenses Total
            h2(class="category__subtitle")= expenseNumber
            h1(class="category__titles green__bg") Assets Total
            h2(class="category__subtitle")= assetNumber    
    div(class="right__partition")
        h1(class="category__titles") Expense / Assets History
        div(class="categories__container")
            h1(class="history__titles") Item
            h1(class="history__titles") Amount
            h1(class="history__titles") Action
        each report in expenseReport
            div(class="reports__container")
                div 
                    h2(class="red__bg reports__text")= report.expense 
                    h2(class="green__bg reports__text")= report.asset
                div
                    h2(class="red__bg reports__text")= report.expenseAmount 
                    h2(class="green__bg reports__text")= report.assetAmount
                div
                    a(class="blue__bg action__button" href="/update/" + report._id) Update
                    a(class="red__bg action__button" href="/delete/" + report._id) Delete
enter code here

5) Delete Route:

const express = require('express');
const app = express();
const router = express.Router();
const Expenses = require('../models/Expense');

// DELETE

router.get('/delete/:id', async(req, res) => {
    try {
        await Expenses.findByIdAndDelete({ _id: req.params.id });
        res.redirect('/');
    } catch(err) {
        res.render({ message: err })
    }
});

module.exports = router;

6)The only way I can get the app working again is to manually insert "budget" value in mongo atlas

7)Deleting expense / income elements do not break the page, only the budget element

Where's the Express route handling the `DELETE /budget/:id`? That would help. Also, what is the `href` of the delete route in your app when it runs? Is the `:id` it is pointing to actually in your DB? — djs, Apr 02 '20 at 02:09
@DanielSchroederDev Hi Daniel, thank you for your swift response. I've edited my post to include my route handling the delete, thanks for pointing that out! The data for budget is rendering properly from the DB when I create and update, it's the delete that breaks everything. — Lemuel, Apr 02 '20 at 02:25
What is `report_id`? Is that an `_id` for an `Expense`? Where is it set, can you include that code? — djs, Apr 02 '20 at 16:43

djs · Accepted Answer · 2020-04-03T16:26:48.713

0

I think findByIdAndDelete just takes the id, not an object see the docs:

await Expenses.findByIdAndDelete(req.params.id);

Your code would work with findOneAndDelete though:

await Expenses.findOneAndDelete({ _id: req.params.id });

Once you have the correct Mongoose query, you need to edit your res.redirect() to include the 303 status code like so:

res.redirect(303, '/');

When you leave out the redirect status code, Express defaults to 302, which is a problem that is explained well here and here.

Check out the logs for each different method. Here is with res.redirect('/'):

And here is with the provided status code res.redirect(303, '/'):

edited Apr 03 '20 at 16:26

answered Apr 02 '20 at 02:44

djs

3,947
3
14
28

Hello, I tried findOneAndDelete and it's still breaking. Could it be my route is supposed to be a post method and not a get? – Lemuel Apr 02 '20 at 03:52
OK, it doesn't matter what the route method is in this case. If you are sending the request from an ``, it will be `GET`, so your handler is correct. Are you sure the `req.params.id` is a valid `_id` that links to a model in your DB? – djs Apr 02 '20 at 16:38
Yes sir, my req.params.id checks out. I console log it, it's rendering, and I'm looking at mongodb atlas when it is being deleted. I added an error handler last night: – Lemuel Apr 03 '20 at 03:59
router.post('/delete/:id', async(req, res) => { try { const expense = await Expenses.findById(req.params.id); if(!expense) { res.status(404).json({ success: false, error: 'No expense found' }); } await expense.remove(); res.status(200).json({ success: true, data: {} }); res.redirect('./'); } catch(err) { return res.status(500).json({ success: false, error: 'Server Error' }); – Lemuel Apr 03 '20 at 04:00
Ahhh, the issue is the `res.redirect('/')` line. You need to include the `303` status. Check out my updated answer. – djs Apr 03 '20 at 16:27

Deleting an element breaks my app and sends an error with an empty object, using Mongo/Mongoose/NodeJS/Express

1 Answers1