4

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 ?

Jota
  • 819
  • 6
  • 24
  • 41

5 Answers5

3

you could request to the proper uri with DELETE method.

example:

DELETE /users/1

http://localhost:4000/users/1
jsina
  • 4,433
  • 1
  • 30
  • 28
2

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
    }
  ]
}
Shiwantha Viraj
  • 301
  • 3
  • 8
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?

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
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
});
kreed
  • 61
  • 5
0

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

noob_developer
  • 183
  • 3
  • 11