Getting error on deleting data from database through api route in browser

I want to delete the user from DB when i press on close or cross image and I gave the route on href
when I am hitting that particular route through thunderclient I am getting the result i.e user get deleted from DB
But when i hit the cross image i gets an error or i enter the route through browser I am getting error


when I open dev tools its server responded with 404 not found
list.hbs code

<html>
  <head>
    <title>Employees List</title>
    <link href="/css/index.css" rel="stylesheet">
  </head>
  <body>
      <div id="wrapper-div">
      <div id="list-box">
          <h1 id="list-head">Employees List</h1>
          <div id="table-wrapper">
          <table width="70%" id="table" cellspacing="0">
              <tr id="tr-head">
                  <td class="table-head">Full Name</td>
                  <td class="table-head">Email</td>
                  <td class="table-head">Mobile</td>
                  <td class="table-head">City</td>
                  <td class="table-head"></td>
                  <td class="table-head"></td>
              </tr>
                {{#each list}}
              <tr class="tr-data-class">
                <td class="table-data">{{this.name}}</td>
                <td class="table-data">{{this.email}}</td>
                <td class="table-data">{{this.number}}</td>
                <td class="table-data">{{this.city}}</td>
                <td class="table-data"><img src="../images/rename.png" width="20px" height="20px"></img></td>
                <td class="table-data"><a href="/list/employee/{{this._id}}"><img src="../images/close.png" width="20px" height="20px"></img></a></td>
                </tr>
                {{/each}}
              </table>
              </div>
          </div>
          </div>
  </body>
</html>

Employee-controller or route files

const express=require('express');
const async = require('hbs/lib/async');
const Employee=require('../models/employee-model');
const router=express.Router();
// router.get('/',(req,res)=>{
//     res.send("home page");
// })
router.get('/',(req,res)=>{
    res.render('index');
})
router.post('/add',async(req,res)=>{
    const employee=new Employee();
    employee.name=req.body.name;
    employee.email=req.body.email;
    employee.number=req.body.number;
    employee.city=req.body.city;

    try{
        await employee.save();
        res.status(200).send("recorded successfully");
        console.log("success");
    }
    catch(err){
        res.status(404).send(err)
    }
    // console.log(req.body);
})
router.get('/list',async(req,res)=>{
    var data;
    data=await Employee.find({});
    res.render('list',{
        list:data
    }); 
})
router.delete('/list/employee/:id',async(req,res)=>{
    try{
        await Employee.findByIdAndRemove(req.params.id);
        console.log("sucess");
    }
    catch(err){
        res.status(500).send(err);
    }
    // console.log(req.params.id);
})
module.exports=router;

And last server file

const express=require('express');
const bodyParser=require('body-parser')
const app = new express();
app.use(express.json())// will convert string into obj
app.use(bodyParser.urlencoded({extended:true}));
const employeeRouter=require('../controller/employee-controller');
app.use(employeeRouter);
require('../models/db')

const hbs=require('hbs');
const path=require('path');

const publicPath=path.join(__dirname,'../public');
app.use(express.static(publicPath));
const Employee=require('../models/employee-model');

const viewsPath=path.join(__dirname,"../views");
app.set('views',viewsPath);
app.set('view engine','hbs');
// app.post('/employee',async(req,res)=>{
    // const employee=new Employee()
    // const { name, city, email, number } = req.body;
    // const employee=new Employee({ name, city, email, number })
    // try{
    //     await employee.save();
    //     res.status(200).send("recorded successfully")
    // }
    // catch(err){
    //     res.status(404).send(err)
    // }
    // console.log(req.body);
// })
app.listen(8000,()=>{
    console.log("connect to server bro");
})

You have implemented a DELETE request. When you go to that URL your browser is sending a GET request to your sever.
Since there’s no GET method for /list/employee/:id' your server return with a 404 not found error.

You have to send the request using either fetch or XMLHttpRequest (or any other HTTP library you like).
I’m pretty sure that Thunderclient shows you the cUrl request that is doing to your server, you have to replicate that pretty much.

Something like

fetch(deleteEndpoint, {
  method: 'delete',
  headers: {'Content-Type': 'application/json'},
  body:  yourJSONPayload
})

Hope this helps :sparkles:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.