CODEWITHSUNDEEP
javascriptreactjsaxiosjson-server
Jota
Jota

Reputation: 865

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

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 ?

Upvotes: 5

Views: 27440

Answers (7)

zam_22
zam_22

Reputation: 21

Two things you can try:

  1. 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.
  2. 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.

Upvotes: 0

Sidhant Suvagiya
Sidhant Suvagiya

Reputation: 158

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

Upvotes: 1

noob_developer
noob_developer

Reputation: 193

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

Upvotes: 0

Shiwantha Viraj
Shiwantha Viraj

Reputation: 331

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

Upvotes: 3

kreed
kreed

Reputation: 61

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

Upvotes: 0

jsina
jsina

Reputation: 4849

you could request to the proper uri with DELETE method.

example:

DELETE /users/1

http://localhost:4000/users/1

Upvotes: 4

LShapz
LShapz

Reputation: 1766

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?

Upvotes: 1

Related Questions