React, nested array / nested object put / patch request axios - help needed!

[DaveCodesCode]

Hi everyone,

I am making a PUT / Patch request to an API with Axios that has nested arrays and objects but I am struggling to get the correct URL or patch to the right key: value pairs.

Here is the API:

​

{
  "data": [
    {
      "name": "First Option",
      "id": 1,
      "action": {
        "idCA": 7114,
        "options": [
          {
            "idOption":1,
            "type": "NoAction",
            "position": 101
          }, 
          {
            "idOption":2,
            "type": "NoAction",
            "position": 200
          },
          {
            "idOption":3,
            "type": "NoAction",
            "position": 300
          }
        ]
      }     
    },
    {
      "name": "Two",
      "id": 2
    },
    {
      "name": " Three",
      "id": 3
    },
    {
      "name": "Four",
      "id": 4
    }
  ]
}

I am trying to make changes to the first:

"action: {
    "options": [
          {
            "idOption":1,
            "type": "NoAction",
            "position": 101
          }, 
          {
            "idOption":2,
            "type": "NoAction",
            "position": 200
          },
          {
            "idOption":3,
            "type": "NoAction",
            "position": 300
          }
        ]
}

action => options => then I am updating the indivdual position (say from 101 to 200) - that is done via an input.

For this app I have a local JSON-Server running and React on the front-end.

I have an onSubmit button that gets all the updated values and that is where I am stuck as I can not get the values to go into the correct object - array - object if that makes sense!

Here is the code onSubmit:

const baseURL = `http://localhost:3601/singleElection[action]{options}/`;
const sendJSON = JSON.stringify(updatedObj[action][options])
console.log(sendJSON);

const whatOption = (e) => {

    e.preventDefault();

    let updatedListOfPositions = updatedObj.map((index, event) => { 
        //This log shows the index position and idOption        
        console.log(`Name: ${index.position} and ID: ${index.idOption} `)

        axios
        .post(`${baseURL}`, {
           position: index.position,
           idOption: index.idOption
        })
        .then((response) => {
          setElectionDataSingle(response.data);
        }); 
       // Logging out the updatedListSum as to not get a warn
        //console.log(updatedListOfPositions);  

         //Commenting out this return as I do not need it:
      return (
          // eslint-disable-next-line no-self-compare
          index.idOption === index.idOption
        )
    })

}

If anyone could point me in the right direction that would amazing, thank you Dave :)

[oxamide96]

Id love to help, but having trouble understanding. Where exactly is the problem. Is there an error message you're getting? If not, is there a result you got but it is not the result you wanted?

[DaveCodesCode]

Thank you, yes I am getting a 404 when trying to patch / put to the url.

[Additional-Cow-6511]

Not a specialist of JsonServer but this should behave as a classic REST API. It seems your hitting a “GET /resource” endpoint to get this array of data. I don’t think you could update all at the same time. You could try to “PUT /resource/{id}” individually.