CODEWITHSUNDEEP
node.jsrestexpressvue.jsaxios
M. H
M. H

Reputation: 339

Axios PUT doesn't update data

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);
    });
});

Upvotes: 1

Views: 2406

Answers (1)

Michal
Michal

Reputation: 71

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 !

Upvotes: 1

Related Questions