The JSON data sent from Javascript is different than the JSON input received in Java Quarkus Service

I am developing a simple web application using the Vuejs/Nuxtjs which is making a backend call to Java Quarkus Service using the Axios POST request. Within the POST request I am sending the JSON data.

The problem I am facing is that the JSON data that I am sending is bit different than the data I am receiving in the Java Quarkus Service.

I have put a console.log just before sending the JSON data to the Java service and the data looks something like this:

{
  "person": {
    "name": "abcd"
  },
  "animal": {
    "name": "xyz"
  }
}

I have put a System.out at the beginning Java Service and the data I am receiving there is looking something like this:

{
  "inputTemplate": {
    "person": {
      "name": "abcd"
    },
    "animal": {
      "name": "xyz"
    }
  }
}

As we can see the inputTemplate key has been added which is not coming up within the JavaScript. Not sure why is that.

Following is the call from Vuejs Axios, here the console.log is working perfectly and inputTemplate key is not showing up as described in JSON above.

const headers = { 'Content-Type': 'application/json' }
const person = { name: 'abcd' }
const animal = { name: 'xyz' }
const inputTemplate = { person, animal}

console.log(JSON.stringify(inputTemplate, null, 4))

this.$axios.post('/generateTestData', { inputTemplate }, { headers })
  .then((response) => {
    console.log('Response : ' + JSON.stringify(response.data, undefined, 't'))
  })
  .catch((error) => {
    console.log('Error : ' + ' Unable to obtain data, Error : ' + error)
  })

Following is the Java Quarkus service where I am getting that additional inputTemplate key:

  public class TestDataGeneratorResource {
    @POST
    @Path("/generateTestData")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public String generateTestData(String inputTemplate) {
        System.out.println(inputTemplate);
    }
}

Can someone please let me know how to avoid getting the inputTemplate within the Java Service?

Answer

use spread operator to pass the object : this.$axios.post(‘/generateTestData’, { …inputTemplate }, { headers })