Axios PUT doesn't update data
1
I have this VueJS application that is using Axios to PUT an object to the server. The goal is to update this object in the database. The object already exists in the database but the object that is sent back with the PUT has some changed data. These changes are what I want to update to the database. The application runs without error messages but the data in the database is never updated.
Client side
onUpload(): void {
this.chosenRoute.name = this.routeName;
this.chosenRoute.text.paragraphs[0] = this.routeDescription;
this.chosenRoute.text.preamble = this.preamble;
if(this.activity != "") this.chosenRoute.activity = this.activity;
axios.put('http://localhost:8080/route/' + this.selectedRoute, JSON.stringify(this.chosenRoute), {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
}
Server side
app.put('/route/:id', function(req, res, next) {
const routeId = req.params.id;
res.set("Access-Control-Allow-Origin", "*");
Route.update({'_id':routeId}, req.body, function(result) {
return res.send(result);
});
});
node.js rest express vue.js axios
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
add a comment |
1
I have this VueJS application that is using Axios to PUT an object to the server. The goal is to update this object in the database. The object already exists in the database but the object that is sent back with the PUT has some changed data. These changes are what I want to update to the database. The application runs without error messages but the data in the database is never updated.
Client side
onUpload(): void {
this.chosenRoute.name = this.routeName;
this.chosenRoute.text.paragraphs[0] = this.routeDescription;
this.chosenRoute.text.preamble = this.preamble;
if(this.activity != "") this.chosenRoute.activity = this.activity;
axios.put('http://localhost:8080/route/' + this.selectedRoute, JSON.stringify(this.chosenRoute), {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
}
Server side
app.put('/route/:id', function(req, res, next) {
const routeId = req.params.id;
res.set("Access-Control-Allow-Origin", "*");
Route.update({'_id':routeId}, req.body, function(result) {
return res.send(result);
});
});
node.js rest express vue.js axios
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24
add a comment |
1
1
1
I have this VueJS application that is using Axios to PUT an object to the server. The goal is to update this object in the database. The object already exists in the database but the object that is sent back with the PUT has some changed data. These changes are what I want to update to the database. The application runs without error messages but the data in the database is never updated.
Client side
onUpload(): void {
this.chosenRoute.name = this.routeName;
this.chosenRoute.text.paragraphs[0] = this.routeDescription;
this.chosenRoute.text.preamble = this.preamble;
if(this.activity != "") this.chosenRoute.activity = this.activity;
axios.put('http://localhost:8080/route/' + this.selectedRoute, JSON.stringify(this.chosenRoute), {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
}
Server side
app.put('/route/:id', function(req, res, next) {
const routeId = req.params.id;
res.set("Access-Control-Allow-Origin", "*");
Route.update({'_id':routeId}, req.body, function(result) {
return res.send(result);
});
});
node.js rest express vue.js axios
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
I have this VueJS application that is using Axios to PUT an object to the server. The goal is to update this object in the database. The object already exists in the database but the object that is sent back with the PUT has some changed data. These changes are what I want to update to the database. The application runs without error messages but the data in the database is never updated.
Client side
onUpload(): void {
this.chosenRoute.name = this.routeName;
this.chosenRoute.text.paragraphs[0] = this.routeDescription;
this.chosenRoute.text.preamble = this.preamble;
if(this.activity != "") this.chosenRoute.activity = this.activity;
axios.put('http://localhost:8080/route/' + this.selectedRoute, JSON.stringify(this.chosenRoute), {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
}
Server side
app.put('/route/:id', function(req, res, next) {
const routeId = req.params.id;
res.set("Access-Control-Allow-Origin", "*");
Route.update({'_id':routeId}, req.body, function(result) {
return res.send(result);
});
});
node.js rest express vue.js axios
node.js rest express vue.js axios
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
edited Nov 22 '18 at 22:25
Phil
96.7k11138157
96.7k11138157
asked Nov 22 '18 at 22:12
M. HM. H
927
asked Nov 22 '18 at 22:12
M. HM. H
927
asked Nov 22 '18 at 22:12
M. HM. H
927
927
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24
add a comment |
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24
add a comment |
1 Answer
1
active
oldest
votes
1
I think that you shouldn't use JSON.stringify so your code should look like:
axios.put(`http://localhost:8080/route/${this.selectedRoute}`, this.chosenRoute, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
Hope it will help you !
answered Nov 22 '18 at 23:37
MichalMichal
112
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should addapp.use(bodyParser.json({limit: '1mb'}));
– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438529%2faxios-put-doesnt-update-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I think that you shouldn't use JSON.stringify so your code should look like:
axios.put(`http://localhost:8080/route/${this.selectedRoute}`, this.chosenRoute, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
Hope it will help you !
answered Nov 22 '18 at 23:37
MichalMichal
112
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should addapp.use(bodyParser.json({limit: '1mb'}));
– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
add a comment |
1
I think that you shouldn't use JSON.stringify so your code should look like:
axios.put(`http://localhost:8080/route/${this.selectedRoute}`, this.chosenRoute, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
Hope it will help you !
answered Nov 22 '18 at 23:37
MichalMichal
112
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should addapp.use(bodyParser.json({limit: '1mb'}));
– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
add a comment |
1
1
1
I think that you shouldn't use JSON.stringify so your code should look like:
axios.put(`http://localhost:8080/route/${this.selectedRoute}`, this.chosenRoute, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
Hope it will help you !
answered Nov 22 '18 at 23:37
MichalMichal
112
I think that you shouldn't use JSON.stringify so your code should look like:
axios.put(`http://localhost:8080/route/${this.selectedRoute}`, this.chosenRoute, {
onUploadProgress: uploadEvent => {
console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
}
}).then(res => {
console.log(res);
});
Hope it will help you !
answered Nov 22 '18 at 23:37
MichalMichal
112
answered Nov 22 '18 at 23:37
MichalMichal
112
answered Nov 22 '18 at 23:37
MichalMichal
112
answered Nov 22 '18 at 23:37
MichalMichal
112
112
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should addapp.use(bodyParser.json({limit: '1mb'}));
– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
add a comment |
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should addapp.use(bodyParser.json({limit: '1mb'}));
– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
I've tried this but I get a PayloadTooLarge error
– M. H
Nov 23 '18 at 7:21
probably, because your express app have an limit. If you use express you should add
app.use(bodyParser.json({limit: '1mb'}));– Michal
Nov 23 '18 at 22:29
probably, because your express app have an limit. If you use express you should add
app.use(bodyParser.json({limit: '1mb'}));– Michal
Nov 23 '18 at 22:29
I've already set this limit
– M. H
Nov 24 '18 at 13:42
I've already set this limit
– M. H
Nov 24 '18 at 13:42
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438529%2faxios-put-doesnt-update-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you sure there's no errors in your browser console? Do you have something in place to handle the pre-flight OPTIONS request this would generate? How about adding some debugging to your server-side script so you can see what's happening?
– Phil
Nov 22 '18 at 22:24