What is wrong with the delete portion of my API? - node.js

Question

I'm in a web programming class and we are writing web server API's. I've currently implemented POST and GET, but I'm having some trouble implementing DELETE. What am I doing wrong here? I would appreciate a thorough explanation of what I'm doing wrong because I'm really trying to learn the material(unless of course it is simply formatting errors).
There are lots of portions that have not been implemented yet, so I'm sure there are many errors. Mostly I'm concerned with DELETE, and anything else apparent from my code that I don't understand.
I've replaced my domain name with fakeDomainName.com
index.html and script.js are in a public folder. start.js in my main directory.
We are creating a simple voting type api to practice, using a Node.js server and MongoDB database to store the information. Currently, POST and GET are working as expected, but DELETE is giving me these errors:
spread.js:25 DELETE http://fakeDomainName.com:3010/api/candidates/undefined 500 (Internal Server Error)
(anonymous) # spread.js:25
e.exports # spread.js:25
e.exports # spread.js:25
Promise.then (async)
r.request # spread.js:25
r.<computed> # spread.js:25
(anonymous) # axios.min.js:477
deleteItem # script.js:65
invokeWithErrorHandling # vue.js:1855
invoker # vue.js:2173
original._wrapper # vue.js:7416
spread.js:25 Uncaught (in promise) Error: Request failed with status code 500
at e.exports (spread.js:25)
at e.exports (spread.js:25)
at XMLHttpRequest.d.onreadystatechange (spread.js:25)
e.exports # spread.js:25
e.exports # spread.js:25
d.onreadystatechange # spread.js:25
XMLHttpRequest.send (async)
(anonymous) # spread.js:25
e.exports # spread.js:25
e.exports # spread.js:25
Promise.then (async)
r.request # spread.js:25
r.<computed> # spread.js:25
(anonymous) # axios.min.js:477
deleteItem # script.js:65
invokeWithErrorHandling # vue.js:1855
invoker # vue.js:2173
original._wrapper # vue.js:7416
Here is my code in "start.js", which is what I'm using to start the server.
const express = require('express');
const bodyParser = require("body-parser");
const multer = require('multer');
const upload = multer({
dest: './public/images/',
limits: {
fileSize: 10000000
}
});
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(express.static('public'));
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/voting', {
useNewUrlParser: true
});
var candidateSchema = new mongoose.Schema({
name: String,
bio: String,
numVotes: String,
});
var Candidate = mongoose.model('Candidate', candidateSchema);
//add a candidate to the list
app.post('/api/candidates', async(req, res) => {
console.log("initiated post request");
const candidate = new Candidate({
name: req.body.name,
bio: req.body.bio,
numVotes: req.body.numVotes,
});
this.addItem = candidate.data;
try {
await candidate.save();
}
catch (error) {
console.log(error);
res.sendStatus(500);
}
});
// Get a list of all of the candidates.
app.get('/api/candidates', async(req, res) => {
console.log("initiated get request");
try {
let candidate = await Candidate.find();
res.send(candidate);
}
catch (error) {
console.log(error);
res.sendStatus(500);
}
});
//delete a candidate from the list
app.delete('/api/candidates/:id', async(req, res) => {
console.log("initiated delete request");
Candidate.deleteOne({ _id: req.params.id }, function(err) {
if (err) res.sendStatus(500);
else {
console.log(req.params.id, "deleted successfully");
res.sendStatus(200);
}
});
});
//edit a candidate
app.put('/api/candidates/:id', async(req, res) => {
console.log("initiated put(edit) request");
try {
let candidate = await Candidate.findOne({ _id: req.params.id });
candidate.name = req.body.name;
candidate.bio = req.body.bio;
candidate.numVotes = req.body.numVotes;
candidate.save();
res.sendStatus(200);
}
catch (error) {
console.log(error);
res.sendStatus(500);
}
});
app.listen(3010, () => console.log('Server listening on port 3010!'));
and here is my code in script.js, which is linked to my index.html page:
var app = new Vue({
el: '#app',
data: {
name: "",
bio: "",
numVotes: "",
file: null,
addItem: null,
items: [],
findName: "",
findItem: null,
},
created() {
this.getItems();
},
computed: {
suggestions() {
return this.items.filter(item => item.title.toLowerCase().startsWith(this.findTitle.toLowerCase()));
}
},
methods: {
async postItem(item) {
console.log("initiated");
try {
let response = await axios.post('/api/candidates', {
name: this.name,
bio: this.bio,
numVotes: this.numVotes,
});
this.addItem = response.data;
}
catch (error) {
console.log(error);
}
},
async getItems() {
try {
let response = await axios.get("/api/candidates");
this.items = response.data;
return true;
}
catch (error) {
console.log(error);
}
},
selectItem(item) {
this.findName = "";
this.findItem = item;
},
async deleteItem(item) {
try {
let response = axios.delete("/api/candidates/" + item._id);
this.findItem = null;
this.getItems();
return true;
} catch (error) {
console.log(error);
}
},
async editItem(item) {
try {
let response = await axios.put("/api/candidates/" + item._id, {
name: this.findItem.name,
bio: this.findItem.bio,
numVotes: this.findItem.numVotes,
});
this.findItem = null;
this.getItems();
return true;
} catch (error) {
console.log(error);
}
},
},
});
and finally, here is the code I'm using in index.html:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<h2>Hello World</h2>
<div id="app">
<div>
<div>
<input v-model="name" placeholder="Name">
<p></p>
<input v-model="bio" placeholder="Bio">
<p></p>
<input v-model="numVotes" placeholder="Number of votes">
<button #click="postItem">Upload</button>
<button #click="deleteItem">Delete</button>
</div>
<div v-if="addItem">
<h2>{{addItem.name}}</h2>
<h2>{{addItem.bio}}</h2>
<h2>{{addItem.NumVotes}}</h2>
</div>
</div>
<h2>Candidates:</h2>
<div v-for="item in items">
<div #click="selectItem">
<h2>Name: {{item.name}}</h2>
<h2>Bio: {{item.bio}}</h2>
<h2>Number of Votes: {{item.numVotes}}</h2>
</div>
</div>
</div>
<!--Vue and axios-->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/script.js"></script>
</body>
</html>

Answer 1

As you can see in url you are not getting params id its showing as undefined
//fakeDomainName.com:3010/api/candidates/undefined
due to which it is giving error if you will pass with as id it will work as well
//delete a candidate from the list
app.delete('/api/candidates/:id', async(req, res) => {
console.log("initiated delete request");
Candidate.findOneAndDelete({ _id: req.params.id }, function(err) {
if (err) res.sendStatus(500);
else {
console.log(req.params.id, "deleted successfully");
res.sendStatus(200);
}
});
});```

Answer 2

I tested your node side with postman. "Delete" is fine. But as you see in the error itself
DELETE http://fakeDomainName.com:3010/api/candidates/undefined the parameter item id is being sent undefined, hence cannot delete.
In you POST request (on server/node side), you can perhaps add a sendStatus(200) to avoid post request being hung up.Also, You can get id of the saved item while saving the Candidate
Like this:
app.post('/api/candidates', async(req, res) => {
console.log("initiated post request");
const candidate = new Candidate({
name: req.body.name,
bio: req.body.bio,
numVotes: req.body.numVotes,
});
this.addItem = candidate.data;
try {
console.log("Await save...");
let data = await candidate.save();
console.log("Done");
res.statusCode = 200;
res.setHeader('content-type','application/json');
res.end(JSON.stringify(data));
}
catch (error) {
console.log(error);
res.sendStatus(500);
}
});
The response would be like :
{
"_id": "5dd38cb16f47912b40a1deef",
"name": "Ken Adams",
"bio": "bio",
"numVotes": "10",
"__v": 0
}