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 ?

score 3 · Answer 1 · answered Aug 24 '18 at 12:20

3

you could request to the proper uri with DELETE method.

example:

DELETE /users/1

http://localhost:4000/users/1

answered Aug 24 '18 at 12:20

jsina

4,433
1
30
28

score 2 · Answer 2 · answered May 15 '21 at 16:03

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
    }
  ]
}

score 1 · Answer 3 · answered Apr 25 '18 at 18:12

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 '18 at 18:12

LShapz

1,738
11
19

Thank you for your answer, exacty i want a list without the person deleted – Jota Apr 25 '18 at 18:14
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. – LShapz Apr 25 '18 at 18:18
I already the method `get`, `post` too. I would want the method `delete` but be giving error :( – Jota Apr 25 '18 at 18:22
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. – LShapz Apr 25 '18 at 18:38
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. – Safnas Dec 22 '20 at 13:17
Can we delete by querystring? http://localhost:3000/tasks/?id=2&task_name=test2 – Everton Santos Jul 01 '21 at 16:19

score 0 · Answer 4 · answered Mar 13 '19 at 17:06

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 '19 at 17:06

kreed

61
5

score 0 · Answer 5 · answered Jul 14 '22 at 12:04

0

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

answered Jul 14 '22 at 12:04

noob_developer

183
3
11

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

5 Answers5