Problem Posting json data to API using Axios in Vue JS

Question

I am trying to create a Axios request where i will post json data. The format of the data will be

{"qBody":"aaa","qAnswer":"bbb","qOptions":[],"qType":"GAP","qClass":6,"qSubject":1,"qChapter":1,"qCreatorid":1,"qCreatorrole":"admin"}

But it is posting as

{"data":{"qBody":"aaa","qAnswer":"bbb","qOptions":[],"qType":"GAP","qClass":6,"qSubject":1,"qChapter":1,"qCreatorid":1,"qCreatorrole":"admin"}}

Here is my code snippet:

var data = {
              "qBody" : question,
              "qAnswer" : trueFalseAnswer,
              "qOptions" : qOptions,
              "qType" : questionCategory,
              "qClass" : className,
              "qSubject" : subjectName,
              "qChapter" : chapterName,
              "qCreatorid" : qCreatorid,
              "qCreatorrole" : qCreatorrole
            };

    const newData =  JSON.stringify(data)
    
     this.$axios.post("http://128.199.192.87:8081/api/v1/questions/add",{
                  newData
                },{
                  'Content-Type': "application/json"
                }).then((response)=>{
                  console.log(response)
                })

How can I make the format correct? Thanks in advance

When you say "it is posting as..." do you mean: "that's what I see in the browser console"? — tao
– tao, Commented Apr 8, 2021 at 6:16
No. It is from Request Payload in Network Tab of developers Option of the browser — M Rahi
– M Rahi, Commented Apr 8, 2021 at 6:51
Could you please create a runnable minimal reproducible example using codesandbox.io (or a similar service), making sure it reproduces the described behavior? What you're saying is close to impossible. — tao
– tao, Commented Apr 8, 2021 at 7:00

tao · Accepted Answer · 2021-04-08 06:29:01Z

2

What you are console.log()-ing is not what you're sending. It is the response that's getting back from the server. If you want to log what you're sending, use:

console.log(newData);

... just before making the POST request.

Most likely, you don't need to stringify the request.

What you're seeing in the console is the server response. According to the response-schema in their documentation, the server's response data is placed in the .data property of the response object.

So, apparently, the server sends back the same data. With most servers, this means no error has occurred.

In fewer words, you are not sending your data wrapped as { data: ... }. If you were, you would be getting back: { data: { data: ... } }

answered Apr 8, 2021 at 6:29

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M Rahi Over a year ago

I have posted the above json from Request Payload in Network Tab of developers Option of the browser. I tried skipping stringify the data.

Collectives™ on Stack Overflow

Problem Posting json data to API using Axios in Vue JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related