Question

154

Axios PUT request -React

rated 0 times [ 159] [ 5] / answers: 1 / hits: 10537 / 2 Years ago, mon, march 28, 2022, 12:00:00

I want to send a put request to modify the command part of my JSON file. Here is my JSON;

{

  "users": [

    {

      "hostname": "xxx.xxx.xxx.xx",

      "password": "password1",

      "command": "command1",

      "id": 1

    },

    {

      "hostname": "xxx.xxx.xxx.xx",

      "password": "password2",

      "command": "command2",

      "id": 2

    },

    {

      "hostname": "xxx.xx.xx.xxx",

      "password": "password3",

      "command": "command3",

      "id": 3

    }

  ]

}

In App.js I send put request like this;

stopPC(id){        

            axios.put('http://localhost:3002/users/'+id,{

              command: 'stop'

            })   

  }

And I have tried this;

axios({

            method: 'put',

            url: 'http://localhost:3002/users/'+ id,

            data: {

              hostname: id.hostname,

              password: id.password,

              command:  'stop'

            }    

  });

In both, I got the following output in the JSON file.

{

  "users": [

    {

      "command": "stop",

      "id": 1

    },

    {

      "hostname": "xxx.xxx.xxx.xx",

      "password": "password2",

      "command": "command2",

      "id": 2

    },

    {

      "hostname": "xxx.xxx.xxx.xx",

      "password": "password3",

      "command": "command3",

      "id": 3

    }

  ]

}

I want to change only the command information while keeping the hostname and password information the same.
I'm not sure where I went wrong, I'd be glad if you could help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aidengiancarlop

Add To Favorites

Follow

Total Points: 234

Total Questions: 115

Total Answers: 94

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

aidengiancarlop questions

1 How to set Luxon DateTime to start of day (reset time)

Mon, Jul 11, 22, 00:00, 2 Years ago

1 Error: Invalid hook call. Hooks can only be called inside of the body of a function component in React Native

Thu, Sep 9, 21, 00:00, 3 Years ago

1 How to unit test typeorm getRepository with Jest?

Tue, May 18, 21, 00:00, 3 Years ago

1 Next.js bundle size is exploding as a result of dynamic component lookup, how to solve?

Tue, Feb 2, 21, 00:00, 3 Years ago

1 Spy on default exported function with Jest

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 2 Years ago sageallenv · Accepted Answer

If id is of type Number (which I think it is), id.hostname and id.password would be undefined, so basically

{

  hostname: id.hostname,

  password: id.password,

  command: 'stop'

}

and

{

  command: 'stop'

}

are the same to Javascript and you're effectively sending the same payload. I think that the best way of solving this would be changing how the backend handles the incoming payload by just changing the properties that came in the request. If you don't have access to changing the backend, you would have to get or read the current stored value and use that in the payload. Something like

user = axios.get('http://localhost:3002/users/'+id).then(r => r.data)

axios.put('http://localhost:3002/users/'+id,{

            hostname: user.hostname,

            password: user.password,

            command: 'stop'

         })

Also, PUT is meant to be used used to replace a record, and PATCH to update the existing one, which sounds more like what you want to do. Maybe just try axios.patch and it may work.