How to use method delete with Json-server and Axios?

Question

i'm doing a project and using json-server and axios.js, but i am with problem in the method delete.

My axios.js:

remove = (id) => {
  axios.delete('http://127.0.0.1:3000/people/', id)
    .then(function(response) {
      this.setState({
        filtered: response
      })
    }).catch(function(error) {
      console.log(error)
    })
}

The route http://127.0.0.1:3000/people is of the json.server..

And the error :

Failed to load resource: the server responded with a status of 404 (Not Found)

Someone would can help me ?

jsina · Accepted Answer · 2018-08-24 12:20:17Z

4

you could request to the proper uri with DELETE method.

example:

DELETE /users/1

http://localhost:4000/users/1

answered Aug 24, 2018 at 12:20

jsina

4,8791 gold badge34 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shiwantha Viraj · Accepted Answer · 2021-05-15 16:03:35Z

3

try and change your json objects primary key name as id,I think you might have like this

   {
  "tasks": [
    {
      "task_id": 2,
      "task_name": "test2",
      "day": "may 20 2021",
      "reminder": true
    },
    {
      "task_id": 3,
      "task_name": "test3",
      "day": "june 2 2021",
      "reminder": true
    }
  ]
}

change like this and try, It worked for me

  {
  "tasks": [
    {
      "id": 2,
      "task_name": "test2",
      "day": "may 20 2021",
      "reminder": true
    },
    {
      "id": 3,
      "task_name": "test3",
      "day": "june 2 2021",
      "reminder": true
    }
  ]
}

answered May 15, 2021 at 16:03

Shiwantha Viraj

3413 silver badges8 bronze badges

Comments

LShapz · Accepted Answer · 2018-04-25 18:12:07Z

1

Here are a few different suggestions.

1) instead of using a comma, try axios.delete('http://127.0.0.1:3000/people/' + id) so it will just think the url is http://127.0.0.1:3000/people/3 or whatever

2) pass the id through a config object, so axios.delete('http://127.0.0.1:3000/people/', {params: {id: id})

Once you get the deleting working: I believe the response of a DELETE request is an empty object, so you'd be setting state.filtered = {}. I assume you want the list of people without the person you just deleted?

answered Apr 25, 2018 at 18:12

LShapz

1,76613 silver badges19 bronze badges

6 Comments

Jota Over a year ago

Thank you for your answer, exacty i want a list without the person deleted

LShapz Over a year ago

in that case, you will probably need to make another call to axios.get('http://127.0.0.1:3000/people/') and the response will be the full list.

Jota Over a year ago

I already the method get, post too. I would want the method delete but be giving error :(

LShapz Over a year ago

so first thing, you need to change the way you make the delete request to one of the options I provided above. Then it will not return that error. Then after that, you'll need to GET again.

Safnas Over a year ago

could you please elaborate on last sentence? when using httpModule of angular, the DELETE method is removing whole data in db.json. GET after a DELETE return empty list.

|

Sidhant Suvagiya · Accepted Answer · 2024-04-10 10:46:46Z

1

I faced the same issue after many tries, I just restarted the JSON-server and it solve the problem.

answered Apr 10, 2024 at 10:46

Sidhant Suvagiya

3083 silver badges9 bronze badges

1 Comment

Wyatt Over a year ago

Good answer. I also got problem. I tried to change everything in the code but not help. I saw your answer. And well, it works now.

kreed · Accepted Answer · 2019-03-13 17:06:55Z

0

I was just running into this issue. The axios.method(url/id) syntax seems to only work with GET and POST. For delete I used this:

axios({
  method: 'DELETE',
  url: 'http://127.0.0.1:3000/people/' + id
});

answered Mar 13, 2019 at 17:06

kreed

616 bronze badges

Comments

noob_developer · Accepted Answer · 2022-07-14 12:04:46Z

0

Try this, axios.delete(http://127.0.0.1:3000/people/${id})

answered Jul 14, 2022 at 12:04

noob_developer

1933 silver badges15 bronze badges

Comments

zam_22 · Accepted Answer · 2025-02-01 13:09:44Z

0

Two things you can try:

You can try sending a DELETE request to http://127.0.0.1:3000/people/${id} using Postman software or Thunder Client VS Code extension. If the response has status code 200, it means the endpoint is working fine and there is something wrong in your code somewhere.
Another thing you can try is to stop the JSON server and start it again.

I was having the same problem; in my case I solved it using the 2nd option.

answered Feb 1 at 13:09

zam_22

216 bronze badges

Collectives™ on Stack Overflow

How to use method delete with Json-server and Axios?

7 Answers 7

Comments

Comments

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related