Cannot get axios.put working with backend

Question

hi I have a probleme there. I am coding a crud rest api with (mongo atlas,reactjs,nodejs,express) and want to perform some update data but when using axios.put it is not working. Also when I use postman with the backend (router.patch ..) it works the problem is I can't get axios.put in frontend working. Here is the axios.put syntax in front end:

handleUpdate = async(e) => {
    try{
       const res = await axios.put('http://127.0.0.1:3000/posts/'+e,{
           ville: this.state.ville
       })
       alert(res.data)
       console.log(res.data)
    }catch(err){
          console.log(err)
    }
}

and here is the backend part of code of router.patch: //Update a post {ville}

router.patch('/:PostId', async (req,res) => {
    try{
        const updatedPost = await Post.updateOne({_id : req.params.PostId}, 
            { $set: {ville: req.query.ville}
        });
        res.json(updatedPost);
    }catch(err){
        res.json({message: err});
    }
});

can U help please ??

Backend you are using `patch`, and frontend you are using `put`. — Medi, Jun 02 '21 at 09:45

score 2 · Answer 1 · answered Jun 02 '21 at 11:17

Hi thank you CyberEternal for your help and support, I have found the issue and the problem is solved. after changing both the backend and front end to put, I have released that in back end I need to write $set: {ville: req.body.ville} unstead of $set: {ville: req.query.ville} here is the new code in backend: //Update a post {ville}

router.put('/:PostId', async (req,res) => {
    try{
        const updatedPost = await Post.updateOne({_id : req.params.PostId}, 
            { $set: {ville: req.body.ville}
        });
        res.json(updatedPost);
    }catch(err){
        res.json({message: err});
    }
});

and here is the code in front end (I have also add a prompt so the user can enter the id in string format and added the id to the url):

handleUpdate = async(e) => {
    try{
        var person = prompt("Veuillez saisir l'Id de l'employé");
       const res = await axios.put('http://127.0.0.1:3000/posts/'+person,{
           ville: this.state.ville
       })
       alert(res.data)
       console.log(res.data)
    }catch(err){
          console.log(err)
    }
}

It Works !! Thanks !

score 0 · Accepted Answer · answered Jun 02 '21 at 09:48

0

You need to use the PUT method in the backend instead of the PATCH

router.put('/:PostId', async (req,res) => {
    try{
        const updatedPost = await Post.updateOne({_id : req.params.PostId}, 
            { $set: {ville: req.query.ville}
        });
        res.json(updatedPost);
    }catch(err){
        res.json({message: err});
    }
});

Or, use the PATCH method in the frontend side

const res = await axios.patch('http://127.0.0.1:3000/posts/'+e,{
           ville: this.state.ville
       })

answered Jun 02 '21 at 09:48

CyberEternal

2,259
2
12
31

Hi, I have tried the boths (put,patch) in front end and backend but it does not update maybe that I am wrong with the submit form ? here is my code: – Mehdi Ghninou Jun 02 '21 at 09:56
Saisir l'Id:

– Mehdi Ghninou Jun 02 '21 at 09:57
I think you dont need to use input with type="submit". Try to use a button tag for that – CyberEternal Jun 02 '21 at 10:04
Please find more information about the difference https://stackoverflow.com/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable – CyberEternal Jun 02 '21 at 10:05
Hi I have tried with button but it seems that it not working, is there a issue with the key={_id} in the or in handleChange itself ? – Mehdi Ghninou Jun 02 '21 at 10:11
Is the handleUpdate function was called when you have clicked on the button? – CyberEternal Jun 02 '21 at 10:13
to call handleUpdate function I use onClick to call it inside the button tag – Mehdi Ghninou Jun 02 '21 at 10:17
but do I need to make all the axios.put inside a return instruction inside the (handleUpdate = async(e) => {..} ) function? like (handleUpdate = async(e) => {return(...)}) ? – Mehdi Ghninou Jun 02 '21 at 10:18
It doesn't matter. I have asked about handleUpdate function. Are you sure that the function started working when you have clicked on the button? Did you see the result of console.log(res.data) in the console? – CyberEternal Jun 02 '21 at 10:24
it tell me on the console :PUT http://127.0.0.1:3000/posts/[object%20Object] 404 (Not Found) – Mehdi Ghninou Jun 02 '21 at 10:25
Error: Request failed with status code 404 at createError (vendors~main.chunk.js:872) at settle (vendors~main.chunk.js:1106) at XMLHttpRequest.handleLoad (vendors~main.chunk.js:346) – Mehdi Ghninou Jun 02 '21 at 10:26
Have you changed the PATCH to the PUT on the backend side? – CyberEternal Jun 02 '21 at 10:26
Also as you can see [object%20Object] is not correct id – CyberEternal Jun 02 '21 at 10:27
add the console.log(e) into the handleUpdate function before the axios call and check what is it. – CyberEternal Jun 02 '21 at 10:28
yes boths are put. in mongo atlas the default index is an object type but I think that it don't understand the object format of id. – Mehdi Ghninou Jun 02 '21 at 10:28
SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: button, …} this is the result of console – Mehdi Ghninou Jun 02 '21 at 10:30
So what are you see by console.log(e)? – CyberEternal Jun 02 '21 at 10:31
it gives me : SyntheticBaseEve(nt {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: button, …} ) before (PUT http://127.0.0.1:3000/posts/[object%20Object] 404 (Not Found)) error so before the axios.put – Mehdi Ghninou Jun 02 '21 at 10:33
You can't send the object as a path parameter. It should be number of sting – CyberEternal Jun 02 '21 at 10:33
do I need to convert the object to string ? but in front end or back end ? – Mehdi Ghninou Jun 02 '21 at 10:34
the "e" which you are sending as a path parameter should be string or number – CyberEternal Jun 02 '21 at 10:35
for example, your full request URL should be like 127.0.0.1:3000/posts/111231312312313123 – CyberEternal Jun 02 '21 at 10:36
when I want to modify the default index in mongo atlas to string it won't want to modify – Mehdi Ghninou Jun 02 '21 at 10:38
do I need to add a new column of string witch is iduser ? after the _id default index ? – Mehdi Ghninou Jun 02 '21 at 10:38
Ah, man. It's not related to modifying the record in MongoDB. From the backend, you have received a 404 because the URL is wrong. You are sending the wrong parameters to the backend. The URL should be 127.0.0.1:3000/posts/111231312312313123 instead of 127.0.0.1:3000/posts/[object%20Object] – CyberEternal Jun 02 '21 at 10:40
I have changed the axios.put url to the url+id like this axios.put('http://127.0.0.1:3000/posts/60b758fcadd9641d4425a4e4' – Mehdi Ghninou Jun 02 '21 at 10:47
but it works on postman but in axios dont work – Mehdi Ghninou Jun 02 '21 at 10:47
I sure that what I am sending is the param of id but how to make it the right url ? – Mehdi Ghninou Jun 02 '21 at 10:48
Ok. Then add a console.log("TEST", req.params.PostId, req.query.ville) to the backend before calling the database update function. And also try to use ObjectId(req.params.PostId) on the backend when you try to update an item. ObjectId is from mongodb – CyberEternal Jun 02 '21 at 10:54
Like const updatedPost = await Post.updateOne({_id : ObjectId (req.params.PostId)}, { $set: {ville: req.query.ville} }); – CyberEternal Jun 02 '21 at 10:55
I have changed the { $set: {ville: req.query.ville} to { $set: {ville: req.body.ville} and it works with the id in url by default – Mehdi Ghninou Jun 02 '21 at 10:59
but it won't work when I pass the id from parameter in function – Mehdi Ghninou Jun 02 '21 at 10:59
It's because you are sending [object%20Object] as a path parameter instead of Id – CyberEternal Jun 02 '21 at 11:06
You need to add the console loges and see what's happened – CyberEternal Jun 02 '21 at 11:07
it gives me [object Undefined] which is the id. Do I need to convert to toString ? – Mehdi Ghninou Jun 02 '21 at 11:08
no. It should not look like [object Undefined]. It should look like 121412412412 – CyberEternal Jun 02 '21 at 11:09

Cannot get axios.put working with backend

2 Answers2